Question

我有一个菜单，我试图用按钮切换（我已经能够轻松退出）。但是我也希望菜单在它外面点击时隐藏，经过很多谷歌搜索我遇到了这个解决方案。它运作良好，例如，如果你点击div之外，它会隐藏它。但现在我无法用切换按钮切换div。

$('.toggle').click(function() {
  $(this).siblings('div').toggle();
});



$(document).mouseup(function(e) {
  var container = $(".menu");

  // if the target of the click isn't the container nor a descendant of the container
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    container.hide();
  }
});

.toggle {
  border: 1px solid gray;
  padding: 3px;
  width: 50px;
  border-radius: 3px;
  cursor: pointer;
}

.menu {
  border: 1px solid gray;
  width: 150px;
  border-radius: 5px;
  margin-top: 8px;
}

.list,
{
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle">
  Toggle
</div>

<div class="menu">
  <ul class="list">
    <li>Friends</li>
    <li>Family</li>
    <li>College</li>
    <li>Colleague</li>
    <li>Acquaintances</li>
    <li>Unsorted</li>
  </ul>
</div>

如果任何人都可以向我解释这行代码实际上在做什么，我真的很高兴。

container.has(e.target).length === 0

Answer 1

这是一个工作小提琴 - https://jsfiddle.net/s29ppsbd/

红色区域是doc，黄色区域是菜单容器。

条件完全按照在评论中所说的内容完成，可以在代码段中看到，它会检查点击的目标是否不是容器的容器，也不是容器的后代。

您对切换点击以及菜单项点击感兴趣，而不是扩展条件，我决定将所有内容都包含在类menu-container的div中，如果点击事件来自它及其子项（菜单项本身），它不会关闭菜单，否则就会关闭。

单击菜单项后立即关闭菜单是一个选择问题，我个人不喜欢当我点击链接时立即关闭菜单的网站，我感到困惑1秒，直到我看到了浏览器的加载图标。

Answer 2

我认为你正在寻找这个，希望它有所帮助：

$('.toggle').click(function(e) {
    $('.menu').toggle();
});
$('body :not(.menu, ul.list, li, .toggle)').click(function(e) {
    $(".menu").hide();
});

.toggle {
  border: 1px solid gray;
  padding: 3px;
  width: 50px;
  border-radius: 3px;
  cursor: pointer;
}

.menu {
  border: 1px solid gray;
  width: 150px;
  border-radius: 5px;
  margin-top: 8px;
}

.list,
{
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle">
  Toggle
</div>
<div>Click</div>
<div>any</div>
<div>element</div>
<div>to</div>
<div>test</div>
<div>only</div>
<div>affect</div>
<div>toggle and menu classes</div>
<div class="menu">
  <ul class="list">
    <li>Friends</li>
    <li>Family</li>
    <li>College</li>
    <li>Colleague</li>
    <li>Acquaintances</li>
    <li>Unsorted</li>
  </ul>
</div>

使用按钮切换div并在点击div之外隐藏div

2 个答案: