自定义jQuery的下拉菜单(Custom jQuery dropdown)

我创建使用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这样的：

<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插件。

文章来源: Custom jQuery dropdown