jquery - jQuery mouseleave 的问题

Question

我正在尝试创建一个具有以下结构的菜单:

<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 函数。我知道在鼠标离开 child 之前不应该调用 mouseleave，所以我很困惑。

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

谢谢!

蒂姆

Answer 1

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

$j('ul.menuOptions li').hover(function(){
          $j(this).toggleClass("over");
       } ,
       function() {
          $j(this).toggleClass("over");
       }
);