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

参见How to detect a click outside an element?

您可以将一个click 处理程序绑定(bind)到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(); 
});