我有一个带有子菜单的菜单。当您单击菜单项时,将显示子菜单。当鼠标离开菜单时,子菜单将在 1 秒后隐藏。我想要的是,如果鼠标在 1 秒之前返回菜单,隐藏功能终止。
这是我做的:
HTML
<ul>
<li><span>Item</span></li>
<li><span>Item</span>
<ul>
<li><span>Item2</span></li>
<li><span>Item2</span></li>
<li><span>Item2</span></li>
<li><span>Item2</span></li>
</ul>
</li>
<li><span>Item</span></li>
<li><span>Item</span>
<ul>
<li><span>Item3</span></li>
<li><span>Item3</span></li>
<li><span>Item3</span></li>
<li><span>Item3</span></li>
</ul>
</li>
</ul>
CSS
body,htnl,ul{
padding:0;
margin:0;
}
ul {
list-style:none;
background:#ddd;
overflow:hidden;
}
li{
float:left;
display:block;
padding:3px 10px;
margin:4px;
background:#bbb;
}
ul ul{
position:absolute;
display:none;
left:0;
}
jQuery
$("ul li").click(function(){
$(this).find("ul").show();
}).parent().mouseleave(function(){
setTimeout(function(){
$("ul li").find("ul").hide();
},1000);
}).parent().mouseenter(function(){
$("ul li").stop(true,true);
});
最佳答案
您需要对超时有一些引用,稍后您可以使用它来取消:
var timeout;
$("ul li").click(function(){
$(this).find("ul").show();
}).parent().mouseout(function(){
clearTimeout(timeout)
timeout = setTimeout(function(){
$("ul li").find("ul").hide();
},1000);
}).mouseover(function(){
clearTimeout(timeout)
});
编辑: mouseover/out 而不是 mouseenter/leave 并且还在 mouseout 中添加了 clearTimeout
(有助于在 1000 毫秒内进行多次点击)
fiddle :http://jsfiddle.net/MnL6m/
关于javascript - 在 JQuery 中延迟隐藏子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19924917/