jQuery：隐藏（）框时点击身体，但不（）元素本身？

我有一个<a href="#" id="btn">Show Box</a> somwhere在我的DOM。另外我有一个div#overlay，默认设置为display:none;。jQuery：隐藏（）框时点击身体，但不（）元素本身？

// 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外），我希望叠加层也被隐藏。

来源

2013-03-13 matt

您在body捕获click这本身就是从未#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(); 
    } 
});

来源

2013-03-13 13:28:35 techfoobar

谢谢。唯一的问题是覆盖层有孩子，当点击叠加层关闭时，因为它也会触发身体点击。或者还有其他一些问题。 – matt 2013-03-13 14:22:19

任何想法为什么会发生？ – matt 2013-03-13 14:45:47

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

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

来源

2013-03-13 13:30:35 Anujith

jQuery：隐藏（）框时点击身体，但不（）元素本身？

回答

相关问题