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, прикрепленное к всплывающему окну, чтобы скрыть его при отпускании мыши.

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

Что я хочу сделать - это скрыть всплывающее окно, если мышь также оставляет триггер. Простое решение будет -

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

Но проблема в том, что у меня есть несколько элементов триггера на странице, которые все отображают одно и то же всплывающее окно при нажатии. В этом случае, как я могу правильно обработать событие mouseleave, чтобы скрыть / показать всплывающее окно?

Answer 1

Чтобы убедиться, что всплывающее окно закрывается только тогда, когда мышь пользователя покинула и всплывающее окно, и триггер-див, попробуйте следующий код:

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 с, я бы рассмотрел использование живых событий .

Answer 2

Используйте ссылку JQuery $(this) в теле функции:

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