javascript - 子菜单在屏幕调整大小时无法正确呈现(以及意外行为)

Question

我的垂直导航有 5 个链接。在屏幕调整大小后，我的垂直导航变成了水平导航，显示了三个(这 5 个链接中的)和另一个名为 menu 的链接，它显示了另外两个剩余链接。

由于某种原因，在屏幕调整大小时，当 menu 出现时，列表内容已经显示，然后当单击菜单时，即使您没有将鼠标悬停在它上面，它也会保留悬停属性。以下是视觉效果:

1. 在屏幕调整大小时，显示如下:

2. 当悬停在菜单上时:

没关系。我只希望在单击菜单链接时显示链接，而不是将鼠标悬停在上面。但是我不明白为什么 menu 会讲两个 li 空格。

3.点击菜单时:

这没关系。但是，请注意现在菜单 li 的大小是如何完美调整的。

4. 单击menu 并将鼠标移离链接后:

如前所述，我不知道是什么导致了这些问题。

这是我目前的做法:

$(document).ready(function() {
  $(".show").click(function() {
    $(".subMenu").toggleClass("active");
    return false;
  });
});

.site-wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}


/* make divs appear below each other on screen resize */

@media screen and (max-width: 540px) {
  .site-wrapper {
    flex-direction: column;
  }
}

ul.subMenu {
  display: none;
}

.subMenu.active {
  display: flex;
  flex-direction: column;
}

li.show {
  display: none;
}

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.logo-holder {
  text-align: center;
}

.nav {
  text-align: justify;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  width: 100%;
  /* make div span div */
  padding: 0px;
}

.nav ul li {
  list-style-type: none;
}

.nav li:hover a {
  color: #f4f3f3;
}

.active {
  text-align: left;
  padding-left: 15px;
  text-decoration: none;
  background-color: #333;
  color: #f4f3f3;
}

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  .nav-container nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
  .socials {
    display: none;
  }
  .hide {
    display: none;
  }
  .show {
    display: inline-block !important;
  }
  .nav ul li {}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
  <div class="nav-container">
    <div class="logo-holder">
      <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
    </div>
    <div id="navigation-div">
      <nav class="nav">
        <ul>
          <li><a class="nav-link active" href="">Test 1</a></li>
          <li><a class="nav-link " href="">Test 2</a></li>
          <li><a class="nav-link" href="">Test 3</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
          <li class="show"><a class="nav-link" href="">Menu</a>
            <ul class="subMenu">
              <li><a class="nav-link" href="">Test 4</a></li>
              <li><a class="nav-link" href="">Test 5</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Answer 1

解释:

你把很多事情都搞砸了。最重要的是要注意子元素继承自主元素。例如，如果我们有以下 HTML:

<ul id="main_menu">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>
         <ul id="sub_menu">
             <li>sub list item 1</li>
         </ul>
    </li>
</ul>

还有这个 CSS:

#main_menu li {/* This styling will also be applied to sub_menu!! */
    color: red;
}

所以如果你想应用到主菜单下的only direct li，使用>，这意味着只有direct elements，像这样:

#main_menu > li {/* This styling will be applied only to direct li, sub_menu li will not take this styling */
    color: red;
}

解决问题:

1- 添加 !important 到子菜单:

ul.subMenu {
    display: none !important;
}

2- 注释或删除此行:

.nav li:hover a {
    /* color: #f4f3f3; */
}

3- 您的子菜单从主菜单继承了一些不需要的样式。添加这些应该会为您修复它:

.subMenu a.nav-link {
    background-color: #f4f3f3;
    color: #333;
}
.subMenu a.nav-link:hover {
    background-color: #333;
    color: #f4f3f3;
}
.subMenu.active {
    display: block !important;
}

这是一个 demo .