1

我正在尝试构建一个 jQuery 子菜单下拉菜单。

如果我悬停菜单链接按钮，进入子菜单并退出，我的代码可以正常工作。

但是，如果我悬停菜单链接按钮，然后是另一个菜单按钮，子菜单永远不会消失。

我希望它...

  1. 悬停链接按钮时显示子菜单。
  2. 悬停任一按钮时，继续显示活动按钮链接和子菜单。
  3. 退出按钮或子菜单时关闭活动菜单按钮和子菜单（但退出子菜单进入活动按钮时不关闭）。

我希望这是有道理的！

这是我的 HTML：

<ul class="mainmenu">
    <li><a href="">normal</a></li>
    <li class="menudrop"><a href="">dropdown</a></li>
</ul>

<div class="submenu">
    <h3>Aliquam id libero</h3>
    <ul>
       <li><a href="">Vestibulum in purus</a></li>
       <li><a href="">Lectus id vestibulum</a></li>
       <li><a href="">Suspendisse posuere</a></li>
       <li><a href="">Nam ut bibendum</a></li>                                  
   </ul>
</div>

这是我正在使用的 jQuery：

$(function() {  
$(".menudrop").hover(
    function () {
        $(".submenu").show();
    }       
 );         
$(".submenu").hover(
    function () {
        $(".menudrop").addClass("active");
        $(".submenu").show();
    },
    function () {
        $(".menudrop").removeClass("active");
        $(".submenu").hide();
    }
 );         
});

另外，我最初将子菜单设置为在 CSS 中不显示。

.submenu {
position: absolute;
z-index: 2000;
width: 970px;
display: none;
}
4

1 回答 1

1

当您将鼠标悬停在 .menudrop 时，它会激活子菜单，但离开它并不会停用子菜单，因此您可以恢复正常并打开菜单。

当您悬停子菜单时，它会激活并在休假时隐藏，但如果您尝试恢复正常，.menudrop 会再次显示它

如果你添加css你会更好地理解它

.mainmenu li {显示：内联}

最好将子菜单放在 .menudrop 中，并使用下拉菜单在 .hover 进入/离开时显示/隐藏。最终，您最终会出于格式目的使用一些额外的 div。

在这里看小提琴：http: //jsfiddle.net/m2Gfe/2/

当鼠标从 .menudrop 过渡到 .submenu 时，菜单之间仍然存在故障，它们可能会隐藏子菜单，但这可以通过填充和重叠来解决

于 2012-07-02T23:52:11.353 回答