How To Hide Multiple Jquery Toggle() When I Click Outside Of The Menu?

I have multiple toggle elements on my page. I am trying to get them closed when clicking on the outside of the div element. the script i have now works veyr well with multiple elem

Solution 1:

I think you are looking for e.stopPropagation();. Use it in an event on the child items.

This will stop the event from propagating to the parent div.

Solution 2:

In your code the problem is inside the following function, now corrected:

$('html').click(function(event){
    var ele = event.target.tagName + '.' + event.target.className;
    if (ele != 'DIV.sub') {
        $("li.menuContainer div.sub").hide();
    }
});

Like you can see now when you click on whatever html element a check is done to prevent the undesired action.

Solution 3:

use this code

$("li.menuContainer > a.top").click(function(e) {
  e.preventDefault();
  $div = $(this).next("div.sub");
  $("li.menuContainer div.sub").not($div).slideUp();
  $div.slideDown();
});

instead of

$('li.menuContainer').each(function() {
 var $dropdown = $(this);

 $("a.top", $dropdown).click(function(e) {
  e.preventDefault();
  $div = $("div.sub", $dropdown);
  $div.toggle();
  $("li.menuContainer div.sub").not($div).hide();

  returnfalse;
 });

});

and about

$('html').click(function(){
  $("li.menuContainer div.sub").hide();
});

you can use

$(window).on('click',function(e){
   if (!$("li.menuContainer").is(e.target) // if the target of the click isn't the container...
      && $("li.menuContainer").has(e.target).length === 0) // ... nor a descendant of the container
  {
     $("li.menuContainer div.sub").slideUp();
  }
});

Working Demo

Update:

$("div.sub > a.top").on('click',function(e) {
    e.preventDefault(); // prevent page from reloading
    e.stopPropagation(); // prevent parent clickalert('Here We Are :)');
  });

Working Demo