jQuery的下拉導航

我使用簡單的jQuery代碼，以使下拉導航，但它不會給預期的結果...jQuery的下拉導航

jQuery代碼

$(function() { 
    $('.nav li').hover(function() { 
      $('ul', this).slideDown(100); 
     }, function() { 
      $('ul', this).slideUp(100);  
     }); 
});

HTML代碼

<ul class="nav radius clearfix"> 
    <li><a href="#">Dashboard</a></li> 
    <li><a href="#">Projects</a> 
     <ul class="radius"> 
      <li><a href="#">Recent Projects</a></li> 
      <li><a href="#">Archive Projects</a></li> 
      <li><a href="#">New Project</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Messages</a></li> 
</ul>

請檢查並告訴我缺少什麼。謝謝。

來源

2011-09-27 seoppc

什麼是「預計」？對我來說似乎很好：http://jsfiddle.net/APzxv/ –

你期望什麼結果？我試過了，看起來不錯（[看這裏你的例子]）（http://jsfiddle.net/expertCode/G5Pjv/） – expertCode

@expertCode嘗試在項目上的鼠標懸停，並顯示不斷。我正在使用Firefox。 – seoppc

編輯：爲了解決動畫「閃爍問題」，除了在關閉狀態下啓動，您可以使用以下內容（在jsfiddle here上檢查它）。這不是很優雅，但這個問題從一些瀏覽器處理所涉及的元素的大小變化的方式出現，而這也解決：

$(function() { 
    $('.nav li').hover(function() { 

     $('ul:not(:animated)', this).slideDown(100); 
     }, function() { 
      $('ul:not(:animated)', this).slideUp(100);  
     }); 
    $('.nav li ul').slideUp(0); 
});

來源

2011-09-27 12:40:30 Timbo

你在firefox上試過嗎？ – seoppc

是的，看起來不錯。 http://jsfiddle.net/32xEj/ – Timbo

它顯示問題在這裏，當我在項目上的鼠標懸停，它滑落罰款，但是當我嘗試選擇（懸停）任何子元素，例如最近的項目，它做一些奇怪的動畫。 – seoppc

試試這個 - 它增加了一個延遲，以保持「閃爍」你有時會遇到。

$(function() { 
    $('.nav li').hover(function() { 
      $('ul', this).delay(50).stop().slideDown(100); 
     }, function() { 
      $('ul', this).delay(50).stop().slideUp(100);  
     }); 
});

來源

2011-09-27 12:50:17 Blazemonger

它仍然有問題，我應該粘貼我的CSS？ – seoppc

您的閃爍問題不一致，至少對我而言。到目前爲止，我只經歷過一次。 – Blazemonger

jQuery的下拉導航

回答

相關問題