1

jQueryを使用して小さなドロップダウンメニューを作成し、マウスオーバー/マウスアウトイベントの「表示」および「非表示」アニメーションをバインドしました。問題は、ドロップダウンのメニューリスト項目にマウスを合わせると、イベントがトリガーされ、メニューが消えることです。

私も試しまし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>
 ...
4

3 に答える 3

0

これを試して： 

$('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");        
});
于 2012-05-17T14:28:30.257 に答える
0

mouseover/mouseoutの代わりにmouseenter/mouseleaveを使用してください

于 2012-05-17T14:28:37.770 に答える
0 
$('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イベントです。また、現在推奨されているバインディング方法はvia $.on()（jq 1.7以降）です。

于 2012-05-17T14:31:49.780 に答える