Question

我遇到这种情况，如果将鼠标悬停在#main-nav li项上，则会显示subnav。但我需要延迟才能允许用户访问它（subnav）。我尝试过像 this 这样的解决方案但是如果我将鼠标悬停在另一个项目上，则在延迟结束之前它不会隐藏上一个悬停的项目。然后我尝试在handlerOut中添加if语句，以确定是否将鼠标悬停在另一个导航项或mouseOut #main-nav部分，允许计时器运行（但是在handlerOut中没有运行）。

以下是以下代码和 here it is on 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类以前选择的项目，如果有的话。
离开此类元素时，请创建一个允许您进入子菜单的超时。
进入子菜单时，清除超时以使子菜单可见。
离开子菜单时，请将其停用。

可以找到工作版here。

请注意，我将子菜单着色，以便在您进入或离开时清楚显示。

独特的hoverIntent和超时组合

1 个答案: