jQuery下拉菜单一遍又一遍
[英]jQuery dropdown menu over and out
提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。
问题描述
我使用jQuery创建了一个小的下拉菜单，并在mouseover / mouseout事件上绑定了“ show”和“ hide”动画。 问题是，当我将鼠标悬停在下拉菜单中的菜单列表项上时，事件被触发，菜单消失了！
我也尝试过stopPropagation() ，但也失败了：
$('nav>div.dropTrigger').mouseover(function(e)
{
console.log("enter");
$(this).find('div').stop(true,true).animate({ opacity: 'show', height: 'show' },"fast");
});
$('nav>div.dropTrigger').mouseout(function(e)
{
console.log("out");
$(this).find('div').stop(true,true).animate({ opacity: 'hide', height: 'hide' },"fast");
});
$('.dropdown').mouseover(function(e)
{
e.stopPropagation();
});
$('.dropdown').mouseout(function(e)
{
e.stopPropagation();
});
我的标记：
<nav>
<div class="dropTrigger">
<a href="potatoes">some menu</a>
<div class="dropdown">
<ul>[drop menu goes here]
</div>
...
3 条回复
1楼 Th0rndike 0 2012-05-17 14:28:30
尝试这个：
$('nav>div.dropTrigger').mouseover(function(e)
{
console.log("enter");
$(this).find('div:hidden').stop(true,true).animate({ opacity: 'show', height: 'show' },"fast");
});
$('nav>div.dropTrigger').mouseout(function(e)
{
console.log("out");
$(this).find('div:visible').stop(true,true).animate({ opacity: 'hide', height: 'hide' },"fast");
});
2楼 M Sost 0 2012-05-17 14:28:37
使用mouseenter / mouseleave代替mouseover / mouseout
3楼 Bosworth99 0 已采纳 2012-05-17 14:31:49
$('nav>div.dropTrigger').on({
mouseenter : function(){
console.log("enter");
$(this).find('div').stop(true,true).animate({ opacity: 'show', height: 'show' },"fast");
},
mouseleave : function(){
console.log("out");
$(this).find('div').stop(true,true).animate({ opacity: 'hide', height: 'hide' },"fast");
}
});
将事件绑定到mouseenter和mouseleave。 它们是涉及您所描述问题的“魔术” jquery事件。 另外-现在首选的绑定方法是通过$.on() （因为jq 1.7）
问题未解决？试试搜索： jQuery下拉菜单一遍又一遍。
使用 JQuery 下拉菜单淡出背景页面
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.