Javascript 单击带有表单的下拉菜单后，单击“外部”关闭

我有一个包含表单元素的下拉菜单。菜单元素被设置为

display:none 

当单击元素之外的任何内容时。。。至少我是这么想的

这是我的小功能

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

我的问题是，当我在元素内部单击时，它也会关闭，这使得完成表单非常困难，几乎不可能

#loginAcc

是被单击的水平列表项，并且

#auth-menu

是

如果我冒险猜测，我会认为.toggle（）是罪魁祸首，但这纯粹是猜测，如果我要重新实现它，我甚至不知道从哪里开始（一只小鸟告诉我，它已经被从规范中删除了）

我希望发生的是，当您单击#loginAcc列表项时，#auth菜单设置为display:block，并且只有在您重新单击#loginAcc或#auth菜单之外的任何其他位置时才能关闭

任何帮助都将是惊人的。谢谢

使用

not（）

选择器排除菜单：

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