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()事件。它确定它是否发生在菜单项内。如果这样做，它会显示内容并隐藏其他内容。否则它会隐藏所有菜单内容。