Question

I wish to create a menu like this with jQuery:

1. A button is clicked which displays a div containing the menu options.
2. If something other then the menu is clicked while open the menu is hidden.

I can do part 1 easily enough but part 2 is what I am having trouble with.
I am using the following code:

$("html").click(function(){
    menu.hide();
});

However this closes the menu as soon as I click on the button.

Answer 1

Something like this should work:

$("html").click(function(e){
    if(!$(e.target).is('#menu_options_div') && $(e.target).parents("#menu_options_div").length == 0)
        menu.hide();
});

e.target – original clicked element. Simply test if it is not a div with options/menu and if one of its parents is not that options/menu div