自定義jQuery下拉列表

Question

我正在創建一個自定義的簡單下拉使用jQuery，隱藏/顯示基於over狀態的元素。

我現在的問題是，當你瀏覽它隱藏的顯示元素時，你不能將鼠標移動到創建的下拉列表中。

關於如何解決這個問題的任何想法是否有更簡單的方法來做我所擁有的？我將重新使用這個，不確定最好的方法來設置代碼，我不需要複製/粘貼六次。

$(function(){ 
    $("#dog-nav").hover(
     function(){ 
     $(".sub-drop-box-dog").show("fast"); 
     }, 
     function(){ 
     $(".sub-drop-box-dog").hide("fast"); 
     } 
    ); 
    $("#cat-nav").hover(
     function(){ 
     $(".sub-drop-box-cat").show("fast"); 
     }, 
     function(){ 
     $(".sub-drop-box-cat").hide("fast"); 
     } 
    ); 

}); 

Answer 1

你應該使用HTML這樣的：

<div id="#menu"> 
    <ul> 
    <li> 
     <a href="#">Menu1</a> 
     <ul> 
     <li><a href="#">Submenu A</a></li> 
     <li><a href="#">Submenu B</a></li> 
     <li><a href="#">Submenu C</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Menu2</a> 
     <ul> 
     <li><a href="#">Submenu D</a></li> 
     <li><a href="#">Submenu E</a></li> 
     <li><a href="#">Submenu F</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

然後jQuery的是這樣的：

 
$("#menu li").hover(function() { 
    $(this).find("ul").show("fast"); 
}, function() { 
    $(this).find("ul").hide("fast"); 
}); 

然後，當你將鼠標懸停在子菜單中，你居然還在懸停在主菜單然後它不會關閉。 上面的例子也很靈活，所以你不必爲每個菜單編寫一次。

Answer 2

爲了適應鼠標引導錯誤，您應該檢查出jQuery.hoverIntent和/或jQuery.superfish插件。