Question

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

Answer 1

主要问题是因为您在#menutoggle事件上的mouseout选择器需要使用类选择器，而不是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>

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

1 个答案: