Close box by clicking out side of the box

Question

I like to close box by cliking out side of the box.

First 2 scripts are open/close and some decoration of button.They works fine.

Now, on 3rd script, Im trying to close box by cliking out side of the box while box are opening.

It keeps opening and closing like crashed website once I click it now.

It would be much appreciated to hear any help. Thank you.

//1st script to open and close
<script>
$(function(){
  $(".ddd").css("display","none");
  $(".button-toggle").on("click", function() {
    $(".ddd").slideToggle();
  });
});
</script>

//2nd script for decoration
<script>
$(function(){
  var flg = "off";
  $('.button-toggle').on('click', function(){
    if(flg == "off"){
      $(this).html("<div>close</div>");
      flg = "on";
    }else{
      $(this).html("");
      flg = "off";
    }
  });
});
</script>

//3rd script to close box by cliking out side of the box.
<script>
  $(function() {
  var flg = "on";      
    $(document).click(function() {
         if(flg == "on"){            
      $(".button-toggle").click();}
       flg = "off";
    });
  });
</script>

<div class="wrap">

    <div class="button-toggle">
        <div>buttons</div>
    </div>

    <div class="ddd">
        <ul>
            <li>
            BUTTON A
            </li>
            <li>
            BUTTON B
            </li>
        </ul>
    </div>

</div>

have you use bootstrap toggle? – Jinesh Oct 01 '19 at 06:30 — Jinesh, Oct 01 '19 at 06:30
https://stackoverflow.com/a/3028037/6127393 – Arleigh Hix Oct 01 '19 at 08:26 — Arleigh Hix, Oct 01 '19 at 08:26

score 0 · Answer 1 · answered Oct 01 '19 at 06:59

Check this out.


    
        $(function() {
            var flg = "on";      
            $(document).on("click", function(e) {
                if(flg == "on"){            
                    $(".button-toggle").html("");
                    $(".ddd").slideUp();
                }
                flg = "off";
            });
       });

score 0 · Answer 2 · answered Oct 01 '19 at 07:20

You can try this code


    
        $(function(){
          $(".ddd").css("display","none");
          $(".button-toggle").on("click", function() {
            event.stopPropagation();
            $(".ddd").slideToggle();
          });
          $(document).click( function(){
            $('.ddd').slideUp();
          });
       });

score 0 · Answer 3 · answered Oct 03 '19 at 17:39

Your problem is caused by bubbling, here is an explanation taken from the previously linked article:

"When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors."

So when an element is clicked that event will trigger on all parent elements, including the document itself. Once you understand this the problem with your code should become apparent. You are adding an event when the document is clicked which subsequently creates a click on the 'button' which bubbles to the document and runs the on click callback which calls click on the 'button' again in an infinite loop. You can see this by adding a console.log('clicked'); return; before you call .click()

$(function() {
  var flg = "on";      
    $(document).click(function() {
      console.log('I bubbled!');
      // Prevent the click running, stopping the infinite loop
      return;
      if(flg == "on"){            
        $(".button-toggle").click();
      }
      flg = "off";
  });
});

To get around the bubbling you should seperate the functionality of the click from the click, for example by writing a close function and calling that instead of triggering a click on the close button itself.

Close box by clicking out side of the box

3 Answers3