Question

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

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

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

我想要...

将鼠标悬停在链接按钮上时显示子菜单。
在您将鼠标悬停时，继续显示活动按钮链接和子菜单。
退出按钮或子菜单时关闭活动菜单按钮和子菜单（但退出子菜单时不能进入活动按钮）。

我希望这是有道理的！

这是我的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;
}

Answer 1

当你将.menudrop悬停时，它会激活子菜单，但是不会停用子菜单，所以你可以恢复正常并打开菜单。

当你悬停子菜单时，它会变为活动并隐藏休假，但是如果你试图恢复正常，那么.menudrop会再次显示它

如果你添加css

，你可以更好地理解它

.mainmenu li {display：inline}

最好将子菜单放在.menudrop中，并使用菜单下拉显示/隐藏.hover输入/离开。最终你会最终使用一些额外的div来进行格式化。

请点击此处：http://jsfiddle.net/m2Gfe/2/

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

jQuery子菜单显示隐藏的div，但当我悬停div时消失

1 个答案: