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

【问题标题】：Vertical CSS / jQuery Dropdown menu issue?垂直 CSS / jQuery 下拉菜单问题？
【发布时间】：2021-01-30 06:32:27
【问题描述】：

在我的网络应用程序中，我有一个垂直的 CSS 菜单来显示它。我的代码按预期工作，但有一个问题，当我将鼠标悬停在所有 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/

【问题讨论】：

这就是问题所在，它已经制作了应用程序并且前辈要求不要更改任何内容。我故意评论了'.menutoggle' hide mouseout 事件，因为我试过了，当我启用它时，它并没有消失，而是悬停在链接上的行为不同，为一个元素打开的下拉菜单不会留下。您可以启用它并检查行为错误。
我在下面为您添加了一个答案，因为我注意到修复您的错字会引发另一个逻辑问题。
谢谢，通过修改我的代码检查一下。

标签： javascript jquery css drop-down-menu

【解决方案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>

【讨论】：