jquery：隐藏触发器或弹出窗口的 mouseleave 事件上的弹出窗口

Question

我有一个弹出菜单出现在我的页面上的元素的 onclick 事件中，如下所示...

$('.triggerDiv').click(function() {
    var pos = $(this).offset();
    $('#popupDiv').css({
            "left": (pos.left + this.width()) + "px",
            "top": pos.top + "px"
        }).slideDown();
});

我还有一个 mouseleave 事件附加到弹出窗口以将其隐藏在 mouseleave 上。

$('#popupDiv').mouseleave(function() {
    $('#popupDiv').slideUp();
});

我想做的是，如果鼠标也离开触发器，则隐藏弹出窗口。简单的解决方案是 -

$('.triggerDiv').mouseleave(function() {
    $('#popupDiv').slideUp();
});

但问题是我在页面上有多个触发元素，它们都显示相同的弹出 onclick。在这种情况下，我如何正确处理 mouseleave 事件以隐藏/显示弹出窗口？

Answer 1

要确保弹出窗口仅在用户的鼠标离开弹出窗口和触发器 div 时关闭，请尝试以下代码：

var closeTimer;

$("#popupDiv, .triggerDiv")
    .mouseleave(function() {
        closeTimer = setTimeout(function() {
            $('#popupDiv').slideUp();
        }, 300);
    })
    .mouseenter(function() {
        if(closeTimer) { closeTimer = clearTimeout(closeTimer); }
    });

上面的代码使用 setTimeout 函数在关闭弹出窗口之前等待 300 毫秒。这为用户提供了足够的时间将鼠标从触发器 div 移动到弹出窗口，反之亦然。请注意，当用户的鼠标进入弹出窗口时，代码通过使用 clearTimeout 取消 closeTimer 来防止弹出窗口关闭。根据我的经验，这使得弹出窗口和悬停菜单更易于使用。

另外，如果有大量 .triggerDiv，我会考虑使用 live events 。

Answer 2

在函数体中使用 JQuery $(this) 引用：

$('.triggerDiv').mouseleave(function() { 
    $(this).slideUp(); 
});