Question

I have multiple menues on my page…

<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>

basically i need all the menu(s) to hide when a click is detected unless someone is clicking any of the menues it should hide any other menu(s) apart from the menu they clicked on.

I have seen a few that work but only if you have one menu on the page which is not exactly useful using stopPropagation as it may cancel any other necessary instructions;

any ideas would be appriciated.

Answer 1

Try:

$(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();
});

Basically this listens to all click() events. It determines if it happened inside a menu item. If it did it shows the content and it hides the content of the others. Otherwise it hides all the menu content.