javascript - 当我在菜单外单击时如何隐藏多个 jQuery toggle()？

Question

我的页面上有多个切换元素。单击 div 元素的外部时，我试图让它们关闭。我现在使用的脚本可以很好地处理多个元素，但它也会在单击 div 内部时关闭 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();

});

});

我想做的是在单击内部时停止关闭 div。有什么帮助吗？

Answer 1

我认为您正在寻找 e.stopPropagation();。在子元素的事件中使用它。

这将阻止事件传播到父 div。