我已经构建了这个下拉菜单，将鼠标悬停在第三个框上并等待下拉列表显示然后悬停在汽车上并等待第二个下拉列表显示。现在问题是，如果我徘徊了它虽然有延迟，我有时间回到菜单上，它仍然会再次调用切换。菜单不会保持打开状态。如果用户在菜单上再次徘徊并再次返回，我该如何保持打开状态？
除了js fiddle上的代码之外，这里的用户建议使用此代码，但是使用它时，菜单首先没有调用，所以没有看到任何内容，建议的代码在这里：
var menu_animation_timeout = null;
$('.ddown').hover(function(){
clearTimeout(menu_animation_timeout);
menu_animation_timeout = setTimeout(function(){
$( this ).children('ul').stop().slideToggle(500,'easeOutBounce');
}, 500)
}, function() {
clearTimeout(menu_animation_timeout);
menu_animation_timeout = setTimeout(function(){
$( this ).children('ul').stop().slideToggle(500,'easeOutBounce');
}, 1000)
});
感谢，
伊恩
答案 0 :(得分：2)
您需要使用stop(true)立即将动画移动到停止时的最后一帧。试试这个：
$(document).ready(function () {
//Show then hide ddown menu on hover
$('.ddown').hover(function () {
$(this).children('ul').stop(true).delay(500).slideDown(500);
}, function () {
$(this).children('ul').stop(true).delay(1000).slideUp(500);
});
});
答案 1 :(得分：1)
HTML只是为了展示一个例子。要点是添加JavaScript（+ jQuery）并在CSS中添加每个li.hover属性#nav li:hover, #nav li.hover {
/* your css */
}
，如下所示：
/* timeout on hover: big menu */
var hoverTimeout; //declare timeout
$('#nav li').hover(function() { //mouse enter
clearTimeout(hoverTimeout); //remove timeout, we're taking over control
$('#nav li').removeClass('hover'); //clear all that are hovered
$(this).parents('li').addClass('hover'); //add class to all our parents
},function() { //mouse leave
var $this=$(this); //create local copy
hoverTimeout = setTimeout(function() {
$this.parents('li').removeClass('hover'); //un-hover all parents
},1000); //1 second after we remove our mouse
});
@charset "UTF-8";
body {
background: #aaa;
}
nav {
display: table-row;
padding: 0;
margin: 0;
border: 0;
}
nav a {
display: block;
line-height: 1em;
text-decoration: none;
}
#nav, nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav {
position: relative;
z-index: 597;
*display: inline-block;
padding-left: .75rem;
display: table-cell;
width: 99%;
}
#nav li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#nav li.hover, #nav li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#nav ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
bottom: 0;
left: 0;
margin-top: 0;
text-transform: none;
min-width: 210px;
}
#nav ul .hassubmenu>a:after {
content: "+";
float: right;
width: 10px;
text-align: center;
}
#nav ul .hassubmenu:hover>a:after, #nav ul .hassubmenu.hover>a:after { content: "-" }
#nav ul ul {
top: 0;
left: auto;
right: -99.5%;
}
#nav li.hover>ul, #nav li:hover>ul { visibility: visible }
#nav ul, #nav {
list-style-type: none;
padding-left: 0;
}
#nav>li {
padding: .5rem;
background: #ddd;
border: #56a0d3 solid 2px;
border-top: none;
border-bottom: none;
}
#nav>li+li { border-left: none }
#nav>li a {
color: #000;
font-weight: 700;
text-decoration: none;
}
#nav>li:hover>a, #nav>li.hover>a { opacity: 1 }
#nav ul li {
position: relative;
float: none;
font-weight: 400;
background: #fff;
background: transparent\9;
background: hsla(0,0,100%,.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
zoom: 1;
padding: 5px 10px;
}
#nav ul li:nth-child(n) { filter: none }
#nav ul li:hover, #nav ul li.hover { background: #fff }
#nav ul li a { line-height: 1.2rem }
#nav ul li:last-child>a { border-radius: 0 0 3px 3px }
#nav ul li ul li ul li li {
background: #000;
background: transparent\9;
background: rgba(0,0,0,.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);
zoom: 1;
border: 10px solid transparent;
border-top: 1px solid #ddd;
border-bottom: none;
}
#nav ul li ul li ul li li:nth-child(n) { filter: none }
#nav ul li ul li ul li li:first-child { border-top: none }
#nav ul li ul li ul li li:last-child { border-bottom: none }
#nav ul li ul li ul li li:hover, #nav ul li ul li ul li li.hover { background: #000 }
#nav ul li ul li ul li li a { color: #62a2d6 }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul id="nav">
<li class="hassubmenu">
<a href="link">Menu-item</a>
<ul>
<li class="hassubmenu">
<a href="link">Sub-menu-item</a>
<ul>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
</ul>
</li>
<li>
<a href="link">Sub-menu-item</a>
</li>
<li>
<a href="link">Sub-menu-item</a>
</li>
</ul>
</li>
<li class="hassubmenu">
<a href="link">Menu-item</a>
<ul>
<li class="hassubmenu">
<a href="link">Sub-menu-item</a>
<ul>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
</ul>
</li>
<li>
<a href="link">Sub-menu-item</a>
</li>
<li>
<a href="link">Sub-menu-item</a>
</li>
</ul>
</li>
<li class="hassubmenu">
<a href="link">Menu-item</a>
<ul>
<li class="hassubmenu">
<a href="link">Sub-menu-item</a>
<ul>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
<li>
<a href="link">Sub-sub-menu-item</a>
</li>
</ul>
</li>
<li>
<a href="link">Sub-menu-item</a>
</li>
<li>
<a href="link">Sub-menu-item</a>
</li>
</ul>
</li>
</ul>
</nav>Iif