JQuery的下拉菜單問題

閱讀說明書之前，請看看下拉菜單，我的jsfiddleJQuery的下拉菜單問題

創建我有我從一個教程採取了JQuery的下拉菜單:)並且它非常適合像平滑地爲下拉功能設置動畫效果。問題是當我將鼠標懸停在菜單右側的向下箭頭（現在是紅色）時動畫（下拉），但這不是我正在尋找的實際上我需要在鼠標懸停菜單時爲其下拉動畫（我們服務和地點）。我對JQuery做了輕微的更新，但是這並不奏效。我額外添加到Jquery中的是

向具有下拉和評論span功能的特定li添加了一個類（.drop）

//$("ul.subnav").parent().append("<span></span>"); 

    $("ul.topnav li.drop").mouseover(function() { 


<li class="drop"> 
     <a href="#">Our Services</a> 
     <ul class="subnav"> 
      <li><a href="#">Contract</a></li> 
      <li><a href="#">Sketch</a></li> 
      <li><a href="#">Implementation</a></li> 
     </ul> 
</li>

雖然我儘量保持下降的懸停效果下拉菜單中可見，當我們把光標移動到下拉菜單..

但兩者功能不工作！

期待您的答覆對這個問題

感謝

保羅

來源

2011-11-18 Akhil Paul

你的代碼可以濃縮到眼前這個：

$(function() { 
    $("ul.topnav li:has(.subnav)").hover(function() { 
     $("ul.subnav", this).slideDown('fast').show(); 
    }, function() { 
     $("ul.subnav", this).slideUp('slow'); 
    }); 
});

http://jsfiddle.net/bKxXZ/13/

這裏是什麼改變了：

從選擇跨度選擇任意李更改.mouseover()選擇器有一個subnav。
將您的選擇器從$(this).parent()更改爲$(this)，因爲我們的選擇器現在指向的是父項。
刪除觸發跨度代碼，您現在不需要它。
刪除觸發範圍.hover()的代碼。
將.mouseover()更改爲.hover()，並將其與現有的.hover()結合使用，因爲它們都適用於相同的元素。

來源

2011-11-18 18:50:58 gilly3

酷男，代碼正在尋找其簡潔的形式謝謝！ –

只要改變一個行：

$("ul.topnav li span").mouseover(function() { ...

應該是：

$("ul.topnav li a").mouseover(function() {

請參閱：http://jsfiddle.net/h5S3c/1/

我剛更新了它以將紅色/綠色條固定在右側。

來源

2011-11-18 18:40:26 jli

+1對於敏銳的眼睛 – diEcho

謝謝jli其工作正常。 –

退房這個更新的提琴：http://jsfiddle.net/ecy7Q/

我基本上改變了

$("ul.topnav li span").mouseover

到

$("ul.topnav li").mouseover

並從隨後的代碼.parent（）。

來源

2011-11-18 18:43:00

謝謝Jose你的回答幫了我.. –

沒問題，anytie。 –

JQuery的下拉菜單問題

回答

相關問題