Question

我已经整理了一个导航栏，可以在悬停时展开子菜单。查看我的jsFiddle。

如果将鼠标悬停在菜单项上，则子菜单会超出父<nav>（我将其显示为蓝色）。我所追求的是蓝色<nav>元素随着孩子<ul>展开。

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

和

如果您的鼠标碰巧快速悬停在导航栏中，请说出“菜单3”和“＃3”。到＆＃39; MENU 1＆＃39;然后在一个子菜单项上休息，例如“A＆A”; （在实际出现之前），jQuery陷入重复循环，每个子菜单都会打开和关闭。

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

Answer 1

在$（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”设置为绝对位置。当元素具有绝对位置时，它将从正常流程中删除

Answer 2

之所以发生这种情况，是因为动画排队并继续运行，除非您强制停止它们。

JQuery's stop()功能可以帮助您。

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

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

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

使jQuery子菜单展开parent AND防止重复slideToggle效果

2 个答案: