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を使用して単純化を試みることもできます 。これは、 mouse enterおよびmouse leaveを使用するのとまったく同じです。

于 2010-04-13T21:23:04.803 に答える