题
我正在尝试创建一个具有以下结构的菜单:
<ul id="primary" class="menuOptions">
<li>Item 1</li>
<li>Item 2
<div id="secondary">
<ul class="menuOptions">
<li>subItemOne</li>
<li>subItemTwo</li>
</ul>
</div>
</li>
<li>Item 3</li>
</ul>
我用这个脚本来制作动画:
$j('.menuOptions li').each(function(i){
//applies to all menu options
$j(this)
.bind('mouseover',function() {
$j(this).toggleClass("over");
})
.bind('mouseleave',function() {
$j(this).toggleClass("over");
});
});
我发现当鼠标移到二级菜单项上时,主菜单项上会调用toggleClass 函数。我知道在鼠标离开孩子之前不应该调用 mouseleave ,所以我很困惑。
我是否需要以某种方式主动停止事件传播?
谢谢!
蒂姆
解决方案
您可以只使用悬停功能的尝试。
$j('ul.menuOptions li').hover(function(){
$j(this).toggleClass("over");
} ,
function() {
$j(this).toggleClass("over");
}
);
其他提示
我怀疑问题是你在耦合 老鼠超过 和 老鼠离开.
看 http://api.jquery.com/category/events/mouse-events/
一般来说,您想要的联轴器是:
- 老鼠进入 和 老鼠离开
- 老鼠超过 和 老鼠出去.
使用其他组合可能会导致不良行为。老鼠超过 和 老鼠出去 是较旧的事件,虽然偶尔仍然有用,但通常不如 老鼠进入 和 老鼠离开.
您还可以尝试使用简单的事情徘徊, ,完全等同于使用 老鼠进入 和 老鼠离开.
不隶属于 StackOverflow