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

Posted 2023-02-25

【中文标题】当我在菜单外单击时如何隐藏多个 jQuery toggle()？

【英文标题】：How to hide multiple jQuery toggle() when I click outside of the menu?

【发布时间】：2015-12-04 21:42:14

【问题描述】：

我的页面上有多个切换元素。单击 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。有什么帮助吗？

【问题讨论】：

你能发布一个小提琴或一个链接到你的页面吗？

【参考方案1】：

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

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

【讨论】：

您需要将点击事件附加到您不希望它关闭的元素。

没问题，如果对您有帮助，请标记为答案:)。

【参考方案2】：

在您的代码中，问题出在以下函数中，现已更正：

$('html').click(函数(事件) var ele = event.target.tagName + '.' + event.target.className; if (ele != 'DIV.sub') $("li.menuContainer div.sub").hide(); );

就像您现在看到的那样，当您单击任何 html 元素时，会进行检查以防止发生不希望的操作。

【参考方案3】：

使用此代码

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

Working Demo

更新：

$("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

【讨论】：

这不起作用，只有当我点击 Menu

时它才会关闭容器

@Aleksandra 首先，您应该检查 Arg0n 答案作为正确答案。第二，我相信您将需要我的代码 :) .. 干杯 :)

我几乎可以完美运行它。单击 div 之外的任何位置时它会关闭 - 在这里很开心。我的问题是，当单击 div 内的 url 时，我希望它关闭。目前，如果我单击 div 内的任何位置，包括 url

，则 div 不会关闭

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

@Aleksandra 用你的新 div 内容更新我的工作演示，并在 jsfiddle 中单击更新并将链接发布给我