1

我整理了一个导航栏，它在悬停时展开子菜单。见我的jsFiddle。

如果您将鼠标悬停在菜单项上，子菜单会扩展到父级之外<nav>（我将其涂成蓝色）。我所追求的是蓝色<nav>元素与 child 一起扩展<ul>。

我不知道我是否需要 jQuery 或 css 解决方案，但到目前为止我所尝试的一切都是徒劳的。

和

如果您的鼠标碰巧快速悬停在导航上，例如从“菜单 3”到“菜单 1”，然后停留在诸如“ONE A”之类的子菜单项上（在它实际出现之前），则 jQuery 会陷入重复循环，其中每个子菜单打开和关闭。

需要改变什么来防止这种情况发生？

4

2 回答 2

2

在 $(this).find('ul') 之后添加 stop() 这应该有助于动画。

$(document).ready(

function() {
    $('.menu li ul').hide();
    $('.menu li').hover(function(e) {
        $(this).find('ul').stop().slideToggle("slow");
    });
});

菜单不展开的原因是您的“.menu li ul”设置为绝对位置。当元素具有绝对位置时，它将从正常流中删除

于 2012-06-21T09:10:10.753 回答
0

发生这种情况是因为动画已排队并且除非您强行停止它们，否则它们会继续运行。

JQuery 的 功能stop()将在这里为您提供帮助。

stop(clearQueue, jumpToEnd)- 停止匹配元素上当前正在运行的动画。

$(this).find('ul').stop(true, true).slideToggle("slow");

检查更新的小提琴：http: //jsfiddle.net/aQBeZ/9/

于 2012-06-21T09:10:32.277 回答