onclick dropdown menu with a form, click outside to close

Question

ive got a drop down menu with form elements. the menu element gets set to

display:none 

when anything outside the element is clicked ... or at least so i thought.

Here's my little function

$(function(){
    $('#loginAcc').click( function(event){
        event.stopPropagation();
        //show
        $('#auth-menu').css('display', 'block');
    });

    $(document).click( function(){
        //hide when click anywhere out the menu
        $('#auth-menu').hide();
    });
})

the problem i have is that it also closes when i click inside the element, which makes it very difficult, pretty much impossible to complete a form.

#loginAcc

is a horizontal list item that gets clicked, and

#auth-menu

is

if i were to hazard a guess, i would like to think that .toggle() is the culprit, but that's a sheer guess and i wouldn't even know where to start if i were to reimplement it (a little bird told me that it's getting taken out of the spec anyway).

what i would like to happen is that when you click on the #loginAcc list item, the #auth-menu gets set to display:block, and can only be closed if you reclick #loginAcc or anywhere else outside of #auth-menu.

any help would be amazing. thanks

Answer 1

Use a not() selector to exclude the menu:

$(document).not('#auth-menu').click( function(){
    //hide when click anywhere out the menu
    $('#auth-menu').hide();
});