JQUERY点击外部元素

Question

我的页面上有多个菜单......

<div class="menu">
   <div>Menu header</div>
   <div>Menu content</div>// should hide on click outside .menu
</div>

<div class="menu">
   <div>Menu header</div>
   <div>Menu content</div>// should hide on click outside .menu
</div>

基本上我需要在检测到点击时隐藏所有菜单，除非有人点击任何菜单，它应该隐藏除了他们点击的菜单之外的任何其他菜单。

我看过一些有用但只有当你在页面上有一个菜单时才使用stopPropagation，因为它可能会取消任何其他必要的指示;

任何想法都会得到满足。

Answer 1

尝试：

$(document).click(function(evt) {
  var menu = $(evt.target).closest("div.menu");
  other = $("div.menu").not(menu).children(":last-child").hide();
  menu.children(":last-child").show();
});

基本上，它会监听所有click()个事件。它确定它是否发生在菜单项中。如果它确实显示了内容并且隐藏了其他内容。否则它会隐藏所有菜单内容。