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

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

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

Answer 2

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

});