Question

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

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

Answer 1

试试这个：

$('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");        
});

Answer 2

使用mouseenter / mouseleave代替mouseover / mouseout

Answer 3

$('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事件，可以解决您描述的问题。此外 - 现在首选的绑定方法是通过$.on()（因为jq 1.7）

jQuery下拉菜单反复出现

3 个答案: