帶表格的onclick下拉菜單，點擊外面關閉

Question

我有一個帶有表單元素的下拉菜單。 menu元素設置為

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-menu設置為display：block，只有當你點擊#loginAcc或＃auth-menu之外的任何地方時才能關閉它。

任何幫助都會很棒。 謝謝

Answer 1

使用not()選擇器排除菜單：

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