0

.stick我有一个菜单，当悬停时，通过添加到子菜单并在鼠标离开时将其删除来显示当前悬停项目的子导航。如果没有悬停在另一个菜单项上，我希望最后一个悬停的菜单项在隐藏之前再保持打开 2 秒。

这就是我所拥有的。我知道mouseleave()容器上的调用将不起作用，因为它在ul#main-nav > li悬停函数的 handlerOut 中，但我离开它是为了向您展示我上次离开的地方。

$('ul#main-nav > li').hover(function() {
    var $this = $(this);
    clearTimeout(window.menustick);
    $this.find('ul.submenu').addClass('stick');
}, function() {
    var $this = $(this);
    if($this.siblings().hover()) {
        $this.find('ul.submenu').removeClass('stick');
    } else if ($('#main-nav').mouseleave()) {
        window.menustick = setTimeout(function(){
            $this.find('ul.submenu').removeClass('stick');
        }, 2000);
    }
});

这是jsFiddle。

提前致谢！

4

2 回答 2

0

JS：

 $("ul#main-nav > li").hover(
    function(){
      $(this).children('ul').hide().fadeIn(500);
    },
    function () {
        $('ul.submenu', this).fadeOut(2000);            
    });

小提琴：http: //jsfiddle.net/3F7bJ/3/

于 2013-08-01T05:05:54.870 回答
0

您的脚本和 CSS 存在一些问题。

首先，您的 CSS 具有以下规则：

nav ul#main-nav li:hover > ul.submenu {
   display: block;
}

这需要修改为：

nav ul#main-nav li > ul.submenu.stick {
     display: block;
}

这意味着您的 CSS 控制的是可见性，而不是“棒”类。

正如您提到的，在脚本代码中使用.hover()and是不正确的，不是必需的。.mouseleave()至此，您已经mouseleave在hover.

以下代码似乎可以执行您正在寻找的预期效果：

var menuStickTimeoutId;
$('ul#main-nav > li').hover(function () {
    var $this = $(this);
    clearTimeout(menuStickTimeoutId);
    $('#main-nav ul.submenu').removeClass('stick');
    $this.find('ul.submenu').addClass('stick');
}, function () {
    var $this = $(this);
    clearTimeout(menuStickTimeoutId);
    menuStickTimeoutId = setTimeout(function () {
        $this.find('ul.submenu').removeClass('stick');
    }, 2000);
});

工作演示：http: //jsfiddle.net/3F7bJ/2/

于 2013-08-01T05:05:44.987 回答