当我在菜单外单击时如何隐藏多个jQuery toggle（）？

Question

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 elements but it also closes the div when clicking on inside of the div

   <ul>      

<li class="menuContainer">
  <a class="top" href="#">Menu</a>   
  <div class="sub"> 
    <a class="top" href="google.com">item in dropdown menu with valid   url when clicked here div.sub should stay close</a>
 </div>
</li>
 <li class="menuContainer">
   <a class="top" href="#">Menu</a>   
    <div class="sub"> 
     <a class="top" href="#">item in dropdown menu when clicked here div.sub should stay open</a>
   </div>
</li>  

$(document).ready(function(){

$('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();
  $( "#effect" ).hide();
  return false;
});
 $("li.menuContainer div.sub").on("click", function (event) {
    event.stopPropagation();
});

});



$(document).on("click", function (){
  $("li.menuContainer div.sub").hide();

});

});

what i want to do is to stop closing div when clicked inside of it. Any help please?

Answer 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.

Answer 2

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();

  return false;
 });

});

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 click
    alert('Here We Are :)');
  });

Working Demo

Answer 3

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.