垂直 CSS/jQuery 下拉菜单问题？

Question

在我的网络应用程序中，我有一个垂直的 CSS 菜单来显示它。 我的代码按预期工作，有一个问题，当我将鼠标a.menutoggle所有a.menutoggle元素上时，最后一个下拉列表保持打开状态。

我不知道如何隐藏它？ 请帮忙！

 $('.menutoggle').mouseover(function(event) { $('.menucontainer').hide(); $(this).next('.menucontainer').toggle(); }); $('#menutoggle').mouseout(function() { $('.menucontainer').hide(); });

 #menuwrap { padding: 50px; } .menutoggle { display: block; z-index: 99; border: 1px solid red; } .menucontainer { display: none; position: absolute; left: 150px; top: 50px; z-index: 999; border: 1px solid blue; background: #999; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div id="menuwrap"> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> <li><a href="#">Siz</a></li> </ul> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">Seven</a></li> <li><a href="#">Eight</a></li> <li><a href="#">Nine</a></li> </ul> </div>

我在这里创建了一个小提琴： https : //jsfiddle.net/rz3g78h1/1/

Answer 1

主要问题是因为mouseout事件上的#menutoggle选择器需要使用类选择器，而不是 id。 将其更改为.menutoggle 。

然而，这引发了另一个问题，即由于使用mouseout鼠标在元素之间移动时菜单会快速闪烁。 要解决此问题，您可以修改逻辑以单独使用 CSS 来显示/隐藏子菜单，如下所示：

 #menuwrap { padding: 50px; } .menutoggle { display: block; z-index: 99; border: 1px solid red; } .menucontainer { display: none; } .menutoggle:hover + .menucontainer, .menutoggle + .menucontainer:hover { display: block; position: absolute; left: 150px; top: 50px; z-index: 999; border: 1px solid blue; background: #999; }

 <div id="menuwrap"> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> <li><a href="#">Siz</a></li> </ul> <a href="#" class="menutoggle">Menu Toggle</a> <ul class="menucontainer"> <li><a href="#">Seven</a></li> <li><a href="#">Eight</a></li> <li><a href="#">Nine</a></li> </ul> </div>