自定义jQuery下拉列表

我正在使用jQuery创建一个自定义的简单下拉列表，它隐藏/显示基于状态的元素。

我现在遇到的问题是，当你查看显示的元素时，它无法将鼠标移动到创建的下拉列表中。

关于如何解决问题的任何想法，是否有更简单的方法来做我所拥有的？ 我将重用这个并且不确定设置代码的最佳方法我不需要复制/粘贴六次。

$(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：

 
 
 
 Menu1 
 
Submenu A
 
Submenu B
 
Submenu C
 
 
 
 Menu2 
 
Submenu D
 
Submenu E
 
Submenu F
 
 
 
  

然后jQuery像这样：

 $（“＃menu li”）。hover（function（）{
   $（本）.find（ “UL”）显示（ “快”）。
 }，function（）{
   $（本）.find（ “UL”）隐藏（ “快”）;
 }）;

然后，当您将鼠标hover在子菜单上时，实际上仍然将鼠标hover在主菜单上，然后它将不会关闭。 上面的示例也很灵活，因此您不必为每个菜单编写一次。

Answer 2

要适应鼠标驾驶错误，您应该查看jQuery.hoverIntent和/或jQuery.superfish插件。