jquery - 使用按钮切换 div，并在该 div 外部单击时隐藏该 div

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

我认为您正在寻找这个，希望它有帮助:

$('.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>