模糊隐藏列表

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 
});