嵌套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

回答

相關問題