1

I have this situation where if hovering over a #main-nav li item it will show the subnav. But I need a delay to allow user to reach it (subnav). I've tried solutions like this but if I hover on another item, it doesn't hide the previous hovered item until delay is over. Then I tried adding if statements within handlerOut to determine if hovering over another nav item or mouseOut #main-nav section allowing the timer to run (but doesn't run since within handlerOut).

Here's the code below and 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 () {
        //
    });
});

Please disregard how the sub-nav is positioned as it relates to the site styling.

Any help would be greatly appreciated.

4

1 回答 1

0

您的代码存在一些问题：

首先，选择器：

如果您想要直系子女，请使用>：

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

您还忘记了#第二个选择器中的 。

从那里开始，假设我正确理解了您的情况，这非常简单：

  • 输入主列表项时active，如果有的话，我会从先前选择的项中删除该类。
  • 离开此类元素时，创建一个允许您进入子菜单的超时。
  • 进入子菜单时，清除超时使子菜单可见。
  • 离开子菜单时，将其停用。

可以在此处找到工作版本。

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

于 2013-07-21T23:21:15.260 回答