Question

所以我有一个下拉列表，我根据元素点击隐藏和显示。但是，如果我单击文档中的任何其他位置，我还希望隐藏此下拉列表。

这是下拉代码：

function dropdown(){
    $('#smenubutton').click(function(e){
        var submenu = $(this).find('.submenu');

        if (submenu.is(':visible')){
            submenu.hide();
        }else{
            submenu.show();
        }
    });
}

然而，像这样的代码：

 $(document).click(function(e){
            e.stopPropagation();
            $('.submenu').hide();
        });

显然总是会隐藏子菜单。两者都加载在文档加载中。我知道我只是错过了这么简单的事情。请随意指出我的副本（我已尝试搜索但根据我的需求找不到任何问题）并关闭此问题。

Answer 1

你应该检查e.target是否是子菜单，并且只有当子菜单不是时才隐藏子菜单（在这种情况下我会检查它是否有类子菜单）

$(document).click(function(e){
            if($(e.target).hasClass("submenu")){ 
              $('.submenu').hide();
            }
        });

Answer 2

由于您提到“浏览器之外”，请尝试以下操作：http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

编辑：由于OP编辑了问题，我将编辑答案：

$(document).on('click', '#submenu', function(e) {
   e.stopPropagation();
   // show or hide the submenu here
});
$(document).on('click', function(e) {
   // hide submenu here
});

示例：http://jsfiddle.net/A3SfP/

Answer 3

试试blur()或focusout()：

$('#smenubutton').blur(function(){ submenu.hide(); });
// OR
$('#smenubutton').focusout(function(){ submenu.hide(); });

如果不起作用，请尝试明确tabindex。

处理文档单击和元素单击之间的冲突

3 个答案: