带表格的onclick下拉菜单,点击外面关闭

时间:2013-08-08 15:46:37

标签: javascript jquery html css

我有一个带有表单元素的下拉菜单。 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。

任何帮助都会令人惊叹。感谢

1 个答案:

答案 0 :(得分:2)

使用not()选择器排除菜单:

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