1

我正在尝试使用这种结构创建一个菜单：

<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 ，所以我很困惑。

我是否需要以某种方式主动停止事件传播？

谢谢！

蒂姆

4

2 回答 2

4

您可以尝试仅使用悬停功能。

$j('ul.menuOptions li').hover(function(){
          $j(this).toggleClass("over");
       } ,
       function() {
          $j(this).toggleClass("over");
       }
);
于 2009-08-04T23:30:20.627 回答
3

我怀疑问题是您将mouse over与mouse leave结合在一起。

见http://api.jquery.com/category/events/mouse-events/

一般来说，您想要的联轴器是：

  • 鼠标进入鼠标离开_
  • 鼠标移出鼠标悬停。_

使用其他组合可能会导致不良行为。 mouse over和mouse out是较旧的事件，虽然偶尔仍然有用，但通常不如mouse enter和mouse leave。

你也可以尝试简单的事情，使用 hover，完全等同于使用鼠标进入和鼠标离开。

于 2010-04-13T21:23:04.803 回答