javascript - 隐藏模糊列表

Question

当我单击按钮时，我会显示一个列表，问题是我想在它失去焦点时隐藏列表，即用户单击页面上的任何位置，但不在该列表上。我怎样才能做到这一点？此外，您还可以看到它应该如何查看 last.fm，其中的配置文件设置列表 ( li.profileItem)。（ul.del li ul默认为display:none）基本列表结构：

<ul class='del'>
    <li>
        <button class='deletePage'></button>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

我用于显示此列表的功能：

$(".deletePage").click(function(){
    if( $(this).siblings(0).css("display") == "block" ){
        $(this).siblings(0).hide();
    } else {
        $(this).siblings(0).show();
    }
});

Answer 1

请参阅如何检测元素外的点击？

您可以将click处理程序绑定到document以隐藏列表，然后将单独的处理程序附加到调用event.stopPropagation.

$(document).click(function() {
 $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
 event.stopPropagation();
});

或者，您可以使用jQuery 外部事件插件：

$('.show-list-button').bind('clickoutside', function() {
 $('.list-to-hide').hide(); 
});

Answer 2

查看Ben Alman 的“外部事件”插件bind('clickoutside')，它增加了处理此类事情的能力。

Answer 3

您可以使用文档单击事件。如果用户在 div 内单击，则事件传播在此处停止（e.stopPropagation），否则它将由文档单击事件处理，该事件检查菜单是否打开以及是否关闭。

$(document).click(function() { 
  // check if the menu is open, if so close it
});

$("#windowdiv").click(function(e){
  e.stopPropagation();
  // do stuff
});