jQuery弹出div淡入后淡出答案

【问题标题】：jQuery popup div fades out after fading injQuery弹出div淡入后淡出
【发布时间】：2012-08-06 15:48:02
【问题描述】：

我的 HTML 代码开头有一个 DIV 元素

<div id="popup"></div>

它的 CSS display 属性最初设置为 none。现在，当我单击特定的 HTML 元素时，会发生以下情况：

$('#popup-opener-button').click(function() {
    $('#popup').fadeIn();
});

这就像魅力一样。现在我希望这个 DIV 在我单击屏幕上的任何位置时消失，除非单击 DIV 本身。我认为这样做可以：

$('#popup').siblings().click(function() {
    $('#popup').fadeOut();
});

但由于我单击以淡入弹出 div 的 SPAN 实际上是#popup 兄弟的孩子，它在淡入后立即淡出。有没有办法不这样做？

【问题讨论】：

有点混乱——你能编辑你显示的标记以包含你引用的这个跨度吗？

标签： jquery

【解决方案1】：

我不确定这在繁重的 DOM 中表现如何，因为会发生大量事件冒泡，:not psuedoselector 不是最快的，但此方法使用您可以使用的选择器传递给.on( ) 以过滤掉div#popup，本质上允许您单击页面上的任何其他内容来触发您的fadeOut()。

$(document.body).on('click',':not(#popup)', function(){ $('#popup').fadeOut(); })

【讨论】：

【解决方案2】：

如果 #popup 最初是隐藏的，我不确定您希望如何点击它。这是您的代码中的错误吗？

这是一个适合我的解决方案。

$('#popup').click(function(e) {
    $('#popup').fadeIn();

    // if i click in the popup, don't bubble the event up to the 'body' 
    e.stopPropagation();

    // hook up the fade-out event to the body to handle a click anywhere else
    $('body').one('click', function () { $('#popup').fadeOut(); });
});

【讨论】：

我的错，对不起。我手头没有原始代码，所以无法复制粘贴。每当我到达我的电脑时，我都会试试这个。