Question

我的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();
});

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

Answer 1

我不确定这会在繁重的DOM中执行得多好，因为会发生大量的事件冒泡并且:not psuedoselector不是最快的，但是此方法使用选择器您可以转到.on( )过滤div#popup，实际上允许您点击页面上的任何其他内容来触发fadeOut()。

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

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

jQuery popup div在淡入后淡出

2 个答案: