jquery - 将鼠标悬停在子菜单上时会随机翻转

在下面的代码中，我创建了一个由<header>和<image>组成的<navigation>。到目前为止，所有这些都是完美的。
现在，1.0 Main Menu由一个Sub-Menu组成，一旦你悬停它，它就会向下滑动。
大多数情况下，这个SlideDown函数没有任何问题，但偶尔Sub-Menu会以某种方式不断地向后翻转并强制执行。这主要发生在您将鼠标放在1. Main Menu上，然后立即将光标移到1.3 Menu上时。
很难解释这种行为，因为它并不总是发生，但我希望您可以在我的代码中看到它。
你也可以找到我的代码here。
为了避免这种Sub-Menu的随机翻转，我需要在代码中更改什么？

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});

body {
 margin: 0;
}

.header {
 width: 80%;
 height: 10%;
 margin-left: 10%;
 display: flex;
 justify-content: space-between;
 position: fixed;
 top: 0;
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: yellow;
}

.image {
 width: 30%;
 height: 100%;
 display: flex;
 justify-content: center;
 text-align:center;
 align-items: center;
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: green;
}

.navigation {
 width: 70%;
 height: 100%;
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
}

.navigation > ul {
 height: 100%;
 display: flex;
 list-style: none;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: blue;
}

.navigation > ul > li  {
 width: 100%;
 display: flex;
 justify-content: center;
 text-align:center;
 align-items: center;
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
}

.content{
 width: 80%;
 margin-top: 10%;
 margin-left: 10%;
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: red;
}

.SlideItem {
 display: none;
}

.button {
 position: relative;
}

.SlideItem {
  width: 100%;
  position:absolute;
  top:100%;
  left:0;
  padding:0;
  margin:0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
}

.SlideItem li {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">

      <div class="image">
      Image
      </div>

      <nav class="navigation">
        <ul>
          <li class="button"> 1.0 Main Menu
            <ul class="SlideItem">
              <li> 1.1 Sub Menu </li>
              <li> 1.2 Sub Menu </li>
              <li> 1.3 Sub Menu </li>
            </ul>
          </li>
          <li> 2.0 Main Menu </li>
          <li> 3.0 Main Menu </li>
        </ul>
      </nav>

</div>

最佳答案

简单的下拉菜单不需要js，您只需使用纯css即可。

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation>ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

.navigation>ul>li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

.button {
  position: relative;
}

.SlideItem {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
  max-height:0px;
  overflow:hidden;
  transition: max-height .5s linear;
}

.button:hover .SlideItem {
  max-height: 100px;
}

.SlideItem li {
  display: block;
}

<div class="header">
  <div class="image">Image</div>
  <nav class="navigation">
    <ul>
      <li class="button"> 1.0 Main Menu
        <ul class="SlideItem">
          <li> 1.1 Sub Menu </li>
          <li> 1.2 Sub Menu </li>
          <li> 1.3 Sub Menu </li>
        </ul>
      </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>
</div>
<div class="content"></div>

关于jquery - 将鼠标悬停在子菜单上时会随机翻转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45797337/