Уникальное сочетание hoverIntent и тайм-аута

Question

У меня есть такая ситуация, когда если зависать над #main-nav li пункт он покажет subnav, Но мне нужна задержка, чтобы позволить пользователю достичь его (subnav). Я пробовал подобные решения, но если я наведу курсор на другой элемент, он не будет скрывать предыдущий элемент, пока не закончится задержка. Затем я попытался добавить операторы if в handlerOut, чтобы определить, находится ли курсор над другим элементом навигации или mouseOut #main-nav секция, позволяющая запустить таймер (но не запускается с тех пор в handlerOut).

Вот код ниже и здесь он находится на jsfiddle.

var $mainlist = $('#main-nav li');
var $subnav = $('#main-nav li ul');

$(function () {

    $mainlist.hoverIntent(

    function () {
        $(this).addClass('active');
    },

    function () {
        if ($('#main-nav li').hover() && $('#main-nav li').not($(this))) {
            $(this).removeClass('active');
        } else if ($('#main-nav').add($subnav).mouseleave()) {
            timer = setTimeout(function () {
                $('#main-nav').find('li.active').removeClass('active');
            }, 1000);
        }
    });

    $subnav.hover(

    function () {
        clearTimeout(timer);
    },

    function () {
        //
    });
});

Пожалуйста, не обращайте внимания, как sub-nav позиционируется как относящийся к стилю сайта.

Любая помощь будет принята с благодарностью.

Answer 1

Было несколько проблем с вашим кодом:

Сначала селекторы:

Если вы хотите непосредственных детей, используйте >:

var $mainlist = $('#main-nav > li');

Вы также забыли # во втором селекторе.

Оттуда это было довольно просто, если я правильно понял ваш сценарий:

• При входе в основной элемент списка я удаляю active класс из ранее выбранного элемента, если есть.
• При выходе из такого элемента создайте тайм-аут, который позволит вам войти в подменю.
• При входе в подменю очистите тайм-аут, чтобы оставить подменю видимым.
• При выходе из подменю отключите его.

Работающую версию можно найти здесь.

Обратите внимание, что я раскрасил подменю, чтобы было понятно, когда вы входите или выходите из него.