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

但问题是我在页面上有多个触发元素，所有触发元素都显示相同的弹出窗口。在这种情况下，如何正确处理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 s，我会考虑使用live events。

Answer 2

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

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

jquery：在mouseleave触发器或弹出窗口事件中隐藏弹出窗口

2 个答案: