1

我用 jQuery 制作了一个小的下拉菜单，并在 mouseover/mouseout 事件上绑定了“显示”和“隐藏”动画。问题是，当我将鼠标悬停在下拉菜单中的菜单列表项上时，会触发事件并且我的菜单会消失！

我也尝试过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

使用 mouseenter/mouseleave 代替 mouseover/mouseout

于 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 回答