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

Question

在我的网络应用程序中，我有一个垂直的 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>

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

Answer 1

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

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

#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>

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

Vertical CSS / jQuery Dropdown menu issue?

javascript

css

jquery

drop-down-menu