Question

Possible Duplicate:
Jquery: drop down menu wont disappear after clicking outside of menu

I recently found a tutorial on creating google like black menu bar with the dropdown

the dropdown is displayed when we click on the ‘more’ button, to hide the dropdown again we should click on the ‘more’ button again

but i want to close the dropdown by clicking anywhere on the body, can anyone let me know how

http://jsfiddle.net/VrmnA/

Thanks in advance

Answer 1

The basic logic should be like this : if clicked anywhere outside the menu, close the dropdown :

var dropdown = $('dropdown_selector');
$(document).click(function(e){
    if(e.target === dropdown.get(0))
        {
            // hide dropdawn code here
        }
});

Here’s a live demo :

http://jsfiddle.net/gion_13/VrmnA/7/

P.S. : the demo is working for the latest jquery version