[英]Hiding sub menu with delay in JQuery
我有一個帶子菜單的菜單。 當您單擊菜單項時,子菜單將可見。 當鼠標離開菜單時,子菜單將在 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);
});
將超時分配給變量並使用 clearTimeout。
var timeout;
$("ul li").click(function(){
$(this).find("ul").show();
}).parent().mouseleave(function(){
timeout = setTimeout(function(){
$("ul li").find("ul").hide();
},1000);
}).parent().mouseenter(function(){
clearTimeout(timeout);
$("ul li").stop(true,true);
});
您需要對 timeout 有一些參考,稍后您可以使用它來取消:
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 毫秒內進行多次點擊)
小提琴: http : //jsfiddle.net/MnL6m/
寫這個:
$("li ul").hide();
$("ul li").click(function(){
$("li ul").hide();//added here
$(this).find("ul").show();
}).parent().mouseleave(function(){......
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.