Question

我正在使用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插件。

自定义jQuery下拉列表

2 个答案: