Question

我有一个菜单，当悬停时，通过将.stick添加到子菜单并在mouseleave上删除它来显示当前悬停项目的子空间。如果没有悬停在另一个菜单项上，我希望最后一个悬停的菜单项在隐藏之前再保持打开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);
    }
});

Here's the jsFiddle.

提前致谢！

Answer 1

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

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

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

这需要修改为：

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

这意味着你的CSS控制了可见性，而不是类'stick'。

正如您所提到的，在脚本代码中使用.hover()和.mouseleave()是不正确的，不是必需的。到那时，您已经在mouseleave的{{1}}（handlerOut）中。

以下代码似乎可以执行您所需的效果：

hover

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

Answer 2

JS：

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

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

使最后一个悬停的菜单项保持打开状态

2 个答案: