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

我有一个弹出菜单出现在点击事件的一个元素在我的网页上，像这样

$('.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事件以隐藏/显示弹出窗口？

在函数体中使用JQuery

$（this）

引用：

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

在函数体中使用JQuery

$（this）

引用：

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

---

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

var closeTimer;

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

上述代码使用函数等待300毫秒，然后关闭弹出窗口。这样用户就有足够的时间将鼠标从触发器div移动到弹出窗口，反之亦然。请注意，当用户的鼠标进入弹出窗口时，代码通过使用

clearTimeout

取消

closeTimer

来阻止弹出窗口关闭。根据我的经验，这使得弹出式窗口和悬停菜单更容易使用

---

此外，如果有大量的<代码> .TrutGeDigi s，我会考虑使用.

以确保弹出式弹出窗口在使用鼠标弹出和触发DIV时关闭，请尝试此代码：

var closeTimer;

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

上述代码使用函数等待300毫秒，然后关闭弹出窗口。这样用户就有足够的时间将鼠标从触发器div移动到弹出窗口，反之亦然。请注意，当用户的鼠标进入弹出窗口时，代码通过使用

clearTimeout

取消

closeTimer

来阻止弹出窗口关闭。根据我的经验，这使得弹出式窗口和悬停菜单更容易使用

---

此外，如果有大量的<代码> .TrutGeDigi s，我会考虑使用.< /P>，ID ID为“PopUPDIV”只有1个元素，多个元素如何触发它显示？@iWantSimpleLife-在触发元素单击事件中，我还使用绝对定位来显示触发器右侧的弹出菜单。@ShiVik您的代码看起来非常合理。你有什么问题吗？我唯一要改变的是，我没有分别选择

“#popupDiv”

和

“.triggerDiv”

，而是使用

“#popupDiv，.triggerDiv”

@Xavi同时选择这两种类型的元素-一个问题是，当触发的mouseleave事件发生时，弹出窗口隐藏。我想在鼠标离开触发器和弹出窗口时隐藏弹出窗口，而不仅仅是其中一个。@ShiVik我明白了。我很快会给出答案。您只有一个id为“popupDiv”的元素，多个元素如何触发它显示？@iWantSimpleLife-在触发元素单击事件中，我还使用绝对定位在触发器右侧显示弹出菜单。@ShiVik您的代码看起来非常合理。你有什么问题吗？我唯一要改变的是，我没有分别选择

“#popupDiv”

和

“.triggerDiv”

，而是使用

“#popupDiv，.triggerDiv”

@Xavi同时选择这两种类型的元素-一个问题是，当触发的mouseleave事件发生时，弹出窗口隐藏。我想在鼠标离开触发器和弹出窗口时隐藏弹出窗口，而不仅仅是其中一个。@ShiVik我明白了。我将很快发布答案。我想隐藏（slideup）弹出菜单而不是触发器元素本身。我想隐藏（slideup）弹出菜单而不是触发器元素本身。