嵌套ul上的jQuery mouseleave

我正在放置一个包含嵌套ul的简单下拉菜单。当我将鼠标悬停在最高层时，我想让它动画成可见状态。然后，当鼠标离开整个导航区域时生成隐藏状态。嵌套ul上的jQuery mouseleave

当动画到可见状态时它工作正常。我的问题是隐藏部分。当鼠标离开最高级别时，它似乎会触发鼠标。我虽然那个mouseleave不应该为孩子的元素做这件事，除非我想错了。

以下是代码。任何帮助或洞察力，表示赞赏。

$(document).ready(function() { 

     //When mouse rolls over 
     $('#mainNavBar li').mouseenter(function(){ 
      $('.menuDrop').stop().animate({height:'163px'},{ queue:false, duration:300, easing: 'easeInQuart'}) 
     }); 

     //When mouse is removed 
     $('#mainNavBar li').mouseleave(function(){ 
      $('.menuDrop').stop().animate({height:'0px'},{ queue:false, duration:300, easing: 'easeOutQuart'}) 
     }); 

    });

和HTML

<ul id="mainNavBar"> 
       <li id="pos1"><a href="#"><span class="accesslinks">TOP 1</span></a> 
        <div class="menuDrop"> 
         <ul class="products"> 
          <li class="active">Product 1</li> 
          <li>Product 2</li> 
          <li>Product 3</li> 
          <li>Product 4</li> 
         </ul> 
         <ul class="tabs"> 
          <li class="selected"><a href="#">Tab 1</a></li> 
          <li><a href="#">Tab 2</a></li> 
          <li><a href="#">Tab 3</a></li> 
          <li><a href="#">Tab 4</a></li> 
         </ul> 
        </div> 
       </li> 
       <li id="pos2"><a href="#"><span class="accesslinks">TOP 2</span></a> 
        <div class="menuDrop"> 
         <ul class="products"> 
          <li class="active">Product 5</li> 
          <li>Product 6</li> 
          <li>Product 7</li> 
          <li>product 8</li> 
         </ul> 
         <ul class="tabs"> 
          <li class="selected"><a href="#">Tab 1</a></li> 
          <li><a href="#">Tab 2</a></li> 
          <li><a href="#">Tab 3</a></li> 
          <li><a href="#">Tab 4</a></li> 
         </ul> 
        </div> 
       </li> 
      </ul>

来源

2011-05-16 MAZUMA

的问题是，#mainNavBar li比赛中#mainNavBar所有li元素在任何级别。这意味着它也与内部li元素相匹配。如果您希望只发生在直接的孩子身上，请将您的选择器更改为#mainNavBar > li。

而且，我想你可能想$(this).find('.menuDrop')，而不是仅仅$('.menuDrop')，否则就会影响到所有.menuDrop元素，而不只是是你徘徊li内的人。

您可能还想尝试悬停以简化您的代码。

http://api.jquery.com/hover/

来源

2011-05-16 23:06:22

谢谢。我忘了邻居兄弟选择器。我还通过使用悬停清理了代码。我试着更早地盘旋，但遇到了很多问题，我不知道是什么原因导致它返回到上面的代码。此外，这并没有完全解决它，但它导致我走向解决方案。在我的CSS中，我把class .menudrop设置为显示：none ;.为了正确工作，它需要溢出：hidden ;.显示：无;导致退出状态不可见。 – MAZUMA 2011-05-17 01:51:38

嵌套ul上的jQuery mouseleave

回答

相关问题