hiding an element on click of anything else on the page

Question

referring to Franek's question found here I have one more question.

The solution on the link above worked for me until I introduced another menu to my page. In this case, there are two menus next to each other. When I click on one of them, the relevant div is displayed showing possible options to select. Then, when I click on the document the div gets closed. But when I click on any other element it is still displayed.

A solution for me would be to run the code to close the menu on any other element click as well as document click.

How can I achieve this ?

(menu: invisible div element that when clicked on its title becomes visible)

Answer 1

This is slightly better, as it also check the parent(s) of the element being clicked:

$(document).click(function(e) {     var target = e.target;      if (!$(target).is('#menu') && !$(target).parents().is('#menu')) {         $('#menu').hide();     } }); 

Answer 2

Clicking on every element but the menu that you want to hide right?

$(function() {     $('*').click(function(e) {         if(e.target.id != 'menu') {             $('#menu').hide();         }     }); });