JQUERY боковой элемент clickout

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() события. Определяет, произошло ли это внутри пункта меню. Если это так, он показывает содержимое и скрывает содержимое других. В противном случае скрывает все содержимое меню.