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

请参阅How to detect a click outside an element?

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

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

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

或者，您可以使用jQuery outside events plugin：

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

Answer 2

查看Ben Alman's "Outside Events" plugin，为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
});

隐藏模糊的列表

3 个答案: