CODEWITHSUNDEEP
jquerywordpressslidetoggleslideup
cwhiro
cwhiro

Reputation: 143

Close box by clicking out side of the box

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>

Upvotes: 0

Views: 255

Answers (3)

mrmadhat
mrmadhat

Reputation: 176

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.

Upvotes: 0

Swati Bathani
Swati Bathani

Reputation: 116

You can try this code


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

Upvotes: 0

Palanivelrajan
Palanivelrajan

Reputation: 74

Check this out.


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

Upvotes: 0

Related Questions