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

為了確保僅當使用鼠標離開彈出窗口和Trigger-div時彈出窗口才會關閉，請嘗試以下代碼：

var closeTimer;

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

上面的代碼使用setTimeout函數在關閉彈出窗口之前等待300毫秒。 這為用戶提供了足夠的時間將鼠標從Trigger-div移至彈出窗口，反之亦然。 請注意，當用戶的鼠標進入彈出窗口時，該代碼通過使用clearTimeout取消closeTimer來防止彈出窗口關閉。 以我的經驗，這使彈出菜單和懸停菜單更易於使用。

另外，如果有大量的.triggerDiv ，我會考慮使用實時事件 。

Answer 2

在函數體中使用JQuery $(this)引用：

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