jQuery淡入/淡出下拉菜單

我是jQuery的新手...有幾個問題讓代碼工作，因爲我想要的。jQuery淡入/淡出下拉菜單

我在這個論壇上看過類似的問題，但不能得到任何建議的解決方案。

我已經設置了一個水平下拉菜單。當頂層鏈接懸停時（子菜單按預期動畫），它工作正常，但是當鼠標離開鏈接時，我無法使子菜單淡出。

希望有人能指出我正確的方向。

這裏是我的代碼，到目前爲止（HTML和jQuery，我不會讓CSS因爲有它的卡車，但是這一切都非常標準）：

HTML：

<div id="nav-container"> 
    <nav id="menu-wrap">  
      <ul id="menu"> 
       <li><a href="/">Home</a></li> 
       <li> 
        <a href="">Categories</a> 
        <ul> 
         <li> 
          <a href="">CSS</a> 
          <ul> 
           <li><a href="">Item 11</a></li> 

           <li><a href="">Item 12</a></li> 
           <li><a href="">Item 13</a></li> 
           <li><a href="">Item 14</a></li> 
          </ul>    
         </li> 
         <li> 
          <a href="">Graphic design</a> 

          <ul> 
           <li><a href="">Item 21</a></li> 
           <li><a href="">Item 22</a></li> 
           <li><a href="">Item 23</a></li> 
           <li><a href="">Item 24</a></li> 
          </ul>    
         </li> 
       </ul> 
      </ul> 
    </nav> 
</div>

jQuery的

$('#menu>li').hover(function(){ 
    $(this).closest('li').find('>ul').css({'opacity':0,'margin- top':20}).show().animate({'margin-top':1,'opacity':1},300); 
},function(){ 
$(this).find('>ul').fadeOut("slow"); 

.});

感謝所有那些回答了建議答案的人。我已經檢查了他們所有的工作都很好。

但是，問題依然存在，我認爲它與我的CSS有關。在CSS中嵌套的標籤（下拉菜單內）有顯示屬性設置爲none：

#nav li ul { 
    display: none; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    padding: 0; margin: 0; 
}

發生了什麼事（我認爲）是，當鼠標從菜單中移開，在，會取代jQuery的CSS的踢，並且嵌套標籤立即重置爲顯示：無。 fadeOut（「慢」）函數沒有機會發生。

$('#menu>li').hover(function(){ 
    $(this).closest('li').find('>ul').css({'opacity':0,'margin-  top':20}).show().animate({'margin-top':1,'opacity':1},300); 
    },function(){ 
    $(this).find('>ul').fadeOut("slow"); 

});

誰能告訴我如何有子菜單設置爲頁面加載不可見的，但是當用戶將鼠標懸停在菜單中，這樣子菜單動畫中也淡出也充分響應jQuery的？？

來源

2014-03-14 Mekong

編輯正確的HTML – 111

您的jQuery有語法錯誤。從最後一行刪除'.' –

$('#menu >li').hover(function(){ 
    $(this).closest('li').find('>ul').css({'opacity':0,'margin- top':20}).show().animate({'margin-top':1,'opacity':1},300); 
},function(){ 
$(this).find('>ul').fadeOut("slow"); 

});

演示：

http://jsfiddle.net/S93Ng/1/

來源

2014-03-14 07:17:04 RGS

感謝您的回答！工作正常，但我已經發現了導致代碼工作不正確的問題。我會再次提出這個問題。 – Mekong

檢查了這一點

<script src="http://code.jquery.com/jquery-latest.min.js" 
     type="text/javascript"></script> 

<div id="nav-container"> 
    <nav id="menu-wrap">  
      <ul id="menu"> 
       <li><a href="/">Home</a></li> 
       <li> 
        <a href="">Categories</a> 
        <ul id="submenu"> 
         <li > 
          <a href="">CSS</a> 
          <ul> 
           <li><a href="">Item 11</a></li> 

           <li><a href="">Item 12</a></li> 
           <li><a href="">Item 13</a></li> 
           <li><a href="">Item 14</a></li> 
          </ul>    
         </li> 
         <li> 
          <a href="">Graphic design</a> 

          <ul> 
           <li><a href="">Item 21</a></li> 
           <li><a href="">Item 22</a></li> 
           <li><a href="">Item 23</a></li> 
           <li><a href="">Item 24</a></li> 
          </ul>    
         </li> 
       </ul> 
      </ul> 
    </nav> 
</div> 
<script>    
$('#menu>li').hover(function(){ 
    $(this).closest('li').find('>ul').css({'opacity':0,'margin- top':20}).show().animate({'margin-top':1,'opacity':1},300); 
},function(){ 
$(this).find('>ul').fadeOut("slow"); 

}); 
$('#submenu>li').hover(function(){ 
    $(this).closest('li').find('>ul').css({'opacity':0,'margin- top':20}).show().animate({'margin-top':1,'opacity':1},300); 
},function(){ 
$(this).find('>ul').fadeOut("slow"); 

}); 
</script>

來源

2014-03-14 07:24:10

感謝您的回答！工作正常，但我已經發現了導致代碼工作不正確的問題。我會再次提出這個問題。 – Mekong

你在找這個？

$("a").click(function(e){ 
e.preventDefault(); 

$(this).parent().children(":not(a)").slideToggle(); 
});

Demo

來源

2014-03-14 07:24:35

感謝您的回答！工作正常，但我已經發現了導致代碼工作不正確的問題。我會再次提出這個問題。 – Mekong

jQuery淡入/淡出下拉菜單

回答

相關問題