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

【问题标题】：How to hide multiple jQuery toggle() when I click outside of the menu?当我在菜单外单击时如何隐藏多个 jQuery toggle()？
【发布时间】：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。有什么帮助吗？

【问题讨论】：

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

标签： javascript jquery html css

【解决方案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 中单击更新并将链接发布给我