Question

I am trying to create a dropdown javascript menu with jquery. I am using hide() and show(). I made it so that when you click on a menu item it shows but I cannot figure out how to make it so that when you click on anything other than the menu it will hide. I have seen it done on multiple sites before. How do you do it?

Answer 1

The gist of it:

// variable menu is your jquery menu ref.
var outsideMenu= function(){
    menu.hide();
    // clean up listener
    $(document).unbind('click', outsideMenu);
}

$(menu).mouseout(function(){
    // cursor is off the menu so attach listener
    $(document).click(outsideMenu);
}).mouseover(function(){
    // back to menu, so remove listener
    $(document).unbind('click', outsideMenu);
});

I assume you can take it from there 😉