當我在菜單外單擊時如何隱藏多個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。

Answer 2

使用此代碼

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

代替

$('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;
 });

});

和關於

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

您可以使用

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

工作演示

更新：

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

工作演示

Answer 3

在您的代碼中，問題出在以下函數內，現在已糾正：

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

就像您現在看到的那樣，當您單擊任何html元素時，都進行了檢查以防止執行不希望的操作。