Question

我用Jquery创建了一个相当传统的3级水平下拉导航菜单。然而，不是第三级被偏移到第二级的一侧，而是打开了手风琴式。鼠标移出后，第三级的关闭会被延迟，以阻止它跳得太多。

我还有一个问题需要解决。当有人打开第三级然后返回到不同的第一级按钮然后返回到原始的第一级按钮时，第三级仍然打开。

您可以在http://jsfiddle.net/BHK3C/6中看到这一点。徘徊在西班牙，然后安达卢西亚，将打开第三级（科尔多瓦等）。如果你然后去摩洛哥并迅速返回西班牙，第三级立即开放。

我尝试过各种各样的事情，比如

   $(".nav1").hoverIntent( 
        function(){//onmouseover 
            $(this).children("ul").slideDown(1000);
            $(".nav2").children("ul").hide(); 
        },

但它们都不起作用。有什么建议吗？

解随后我发现原来的努力有所不同，确实有效：

   $(".nav1").hoverIntent( 
        function(){//onmouseover 
            $(".nav2").children("ul").hide(); 
            $(this).children("ul").slideDown(1000);
        },

只要将鼠标移动到第2级列表中的其他位置，就必须使用.delay（3000）来停止第三级关闭。事实上，我发现.delay（8000）似乎是关于正确的设置。

hoverIntent非常适用于阻止下拉列表以不合需要的方式跳舞。到目前为止，我使用默认设置，但我认为它需要一些调整。你第二次回到2级列表中的同一个地方似乎非常不安全，所以3级非常不愿意打开。

感谢那些回复的人。

Answer 1

你的第一个问题只是CSS之一。您的小提琴中有一些嵌套语句，这可能是问题的根源。

您的第二个问题可能是因为您没有正确处理handlerOut事件。

http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

将代码更改为：

$(".nav1").hover( 
    function(){//onmouseover 
        $(this).children("ul").slideDown(1000); 
    }, 
    function(){//onmouseout 
        $(this).children("ul").slideUp(1000).children("ul").hide(); 
});

隐藏已经滑过的2级元素的孩子。

http://jsfiddle.net/BHK3C/7/

Answer 3

不确定这是您想要的，但在您.delay(3000)的{{1}}

时，请尝试删除ul

此外，在开始新动画之前，请使用jQuery stop() 来结束当前动画。

.nav2

<强> Updated Fiddle

Jquery导航菜单不能像预期的那样工作

3 个答案: