Question

我的DOM中有一个<a href="#" id="btn">Show Box</a> somwhere。另外，我有一个div#overlay，默认设置为display:none;。

// Toggle Overlay
$('#btn').click(function(e) {
    e.preventDefault();
    $('#overlay').toggle();
})

$('body').not('#btn, #overlay').click(function() {
    if ( $('#overlay').is(':visible') ) $('#overlay').hide();
});

为什么这不起作用？我希望#btn在点击时切换（）叠加层。但是，当叠加层可见并且我点击文档的任何位置时（#btn本身或#overlay除外）我也希望隐藏叠加层。

Answer 1

您正在click抓取body，而#btn本身从不 #overlay或event.target，因此无法正常工作。您需要检查的是$('body').click(function(e) { var target = $(e.target); if(!target.is('#btn') && !target.is('#overlay')) { if ( $('#overlay').is(':visible') ) $('#overlay').hide(); } });

即

{{1}}

Answer 2

使用event.target.id比较点击区域的id

$('body').click(function(e) {
   if(e.target.id != 'btn' && e.target.id != 'overlay')
      if ( $('#overlay').is(':visible') ) $('#overlay').hide();
})

jQuery：单击body时隐藏（）框而不是元素本身的（）框？

2 个答案: