下拉問題

Question

我想創建一個下拉列表。我有工作，但不完全，使用此代碼：

$(document).ready(function(){ 
    $("#zone-bar li em").hover(function() { 
     var hidden = $(this).parents("li").children("ul").is(":hidden"); 

     $("#zone-bar>ul>li>ul").hide()   
     $("#zone-bar>ul>li>a").removeClass(); 

     if (hidden) { 
      $(this).parents("li").children("ul").toggle() 
        .parents("li").children("a").addClass("zoneCur"); 
     } 
    }); 
}); 

我設法使它工作等等徘徊在下拉列表中會出現，但是當你移動選擇從下拉列表中的項目之一下拉列表關閉。我如何解決這個問題？

它的作品如果我把它放到onclick，但你必須點擊箭頭再次關閉它。你可以看到（目前使用onclick）

Answer 1

嘗試把懸停在

#zone-bar li 

，而不是在EM

更新，是的，你需要修改腳本在http://doctorwhohd.com一個活生生的例子：

$("#zone-bar li").hover(function() { 
    var hidden = $(this).children("ul").is(":hidden"); 

    $("#zone-bar>ul>li>ul").hide()   
    $("#zone-bar>ul>li>a").removeClass(); 

    if (hidden) { 
     $(this).children("ul").toggle() 
       .children("a").addClass("zoneCur"); 
    } 

}）;

但是，使用mouseenter的建議可能是優越的，似乎這會導致瞬間閃爍。

你可能想考慮用純CSS做這個，沒有明顯的理由來使用jquery來創建這種效果。

#zone-bar li{ height:1em; overflow:hidden}; 
#zone-bar li:hover{ height:auto}; 

Answer 2

這很可能是這樣的行爲，因爲hover()旨在承擔2個功能。一個用於mouseenter，另一個用於mouseleave。

當你只給它一個，我認爲它觸發了這兩個事件。

而不是hover()，使用mouseenter()。

$("#zone-bar li em").mouseenter(function() { 
    var hidden = $(this).parents("li").children("ul").is(":hidden"); 

    $("#zone-bar>ul>li>ul").hide()   
    $("#zone-bar>ul>li>a").removeClass(); 

    if (hidden) { 
     $(this).parents("li").children("ul").toggle() 
       .parents("li").children("a").addClass("zoneCur"); 
    } 
});