在 JQuery 中隐藏有延迟的子菜单
Hiding sub menu with delay in JQuery
我有一个带有子菜单的菜单。当您单击菜单项时,子菜单将可见。当鼠标离开菜单时,子菜单将在 1 秒后隐藏。我想要的是,如果在 1 秒隐藏功能终止之前鼠标返回菜单。
这是我所做的:
js小提琴
.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)
});
编辑:鼠标悬停/退出而不是鼠标输入/离开,并在鼠标退出中添加clearTimeout
(有助于在 1000 毫秒内多次点击)
小提琴 : http://jsfiddle.net/MnL6m/
将超时分配给变量并使用 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);
});
写这个:
$("li ul").hide();
$("ul li").click(function(){
$("li ul").hide();//added here
$(this).find("ul").show();
}).parent().mouseleave(function(){......
在这里摆弄。
相关文章:
- JS在选择下拉菜单打开时创建延迟
- 引导程序切换菜单中的延迟
- 在菜单下拉条上应用2秒延迟
- 顶级/下级菜单上的隐藏()延迟问题,但当鼠标再次进入时取消隐藏()
- 我们如何在下拉子菜单中设置5秒的时间或延迟
- 没有jQuery的延迟下拉菜单
- jQuery增加了菜单导航的延迟,可用性
- 在 JQuery 中隐藏有延迟的子菜单
- JQuery浮动菜单栏,滚动位置和延迟
- Jquery 下拉菜单鼠标输入延迟
- 加载时淡入菜单项(有延迟)
- 子菜单显示的良好延迟持续时间是多少
- Dropline菜单JavaScript延迟
- 如何延迟悬停时立即出现的超级菜单
- CSS下拉菜单:添加鼠标退出延迟
- Javascript在菜单项上没有延迟,但是悬停离开菜单时有5秒延迟
- 延迟显示下拉菜单内容
- 延迟jQuery下拉菜单
- jquery下拉菜单中的延迟关闭开关
- 下拉菜单延迟-不工作