ClassList.toggle 无法在 ul 中工作 (HTML/CSS/JavaScript)

Question

所以我对 JavaScript 还很陌生，我正在尝试为移动设备制作一个下拉导航栏。

let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');

navBarToggle.addEventListener('click', function () {

    mainNav.classList.toggle('active');
});

let dropdownNav = document.getElementById('js-dropdown-menu');
let dropdownToggle = document.getElementById('js-dropdown-toggle');

dropdownToggle.addEventListener('click', function () {

    dropdownNav.classList.toggle('active');
});

@import "https://fonts.googleapis.com/css?family=Lato:900i|Roboto:900|Roboto:700|Roboto:300&display=swap";

:root {
  --primary-color: #518985;
  --navbar-bg-color: #F2F2F2;
  --header-text-color: #000000;
  /*--text-color-1: #F2F2F2;*/
  /*--text-color-2: #000000;*/

  /*--header-height: 75px;*/
  /*--header-dropdown-tab-height: 50px;*/

  --logo-font: Lato, sans-serif;

  --tab-font: Roboto, sans-serif;
  --tab-font-weight: 300;
  --tab-font-size: 15px;

  /*--dropdown-tab-font-weight: 700;*/
  --dropdown-tab-font-size: 13px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Roboto, sans-serif;
  background-color: var(--primary-color);
}

.navbar {
  background: var(--navbar-bg-color);
  padding-bottom: 10px;
  font-size: 18px;
}

.navbar-toggle {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    font-size: 20px;
}

.logo {
  display: inline-block;
  font-size: 22px;
  padding-top: 10px;
  padding-left: 22px;

  font-family: var(--logo-font);
  font-style: italic;
  letter-spacing: -1.5px;
}

.logo-letter-accent-color {
  color: var(--primary-color);
}

.logo-letter-text-color {
  color: var(--header-text-color);
}

.main-nav {
  list-style-type: none;
  display: none;
  padding-top: 10px;
}

.active {
  display: block;
}

.nav-link, .logo {
  text-decoration: none;
  color: black;
}

.nav-link {
  display: block;
  width: 100%;
  padding: 8px 20px;
  font-family: var(--tab-font);
  font-family: var(--tab-font-weight);
  font-size: var(--tab-font-size);
}

.nav-dropdown {
  display: none;
}

.dropdown-link {
  padding-left: 30px;
  font-size: var(--dropdown-tab-font-size);
}

.dropdown-toggle {
  float: right;
}

#selected-tab {
  color: var(--primary-color);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="https://kit.fontawesome.com/6a2f31ed4f.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="header_mobile.css">
    <title></title>
  </head>
  <body>

    <!-- Start Nav -->
    <nav class="navbar">
      <span class="navbar-toggle" id="js-navbar-toggle">
        <i class="fas fa-bars"></i>
      </span>
      <a class="logo" href="#">
        <span class="logo-letter-accent-color">J</span><span class="logo-letter-text-color">D</span><span class="logo-letter-text-color">L</span>
      </a>
      <ul class="main-nav" id="js-menu">
        <li><a id="selected-tab" class="nav-link" href="#">Home</a></li>
        <li><a class="nav-link" href="#">Leben</a></li>
        <li><a class="nav-link" href="#">Interessen</a></li>
        <li><a class="nav-link" id="js-dropdown-toggle" href="#">Background<span class="dropdown-toggle">
          <i class="fas fa-chevron-down"></i>
        </span></a>
          <ul class="nav-dropdown" id="js-dropdown-menu">
            <li><a class="nav-link dropdown-link" href="#">Qualifikation</a></li>
            <li><a class="nav-link dropdown-link" href="#">Referenzen</a></li>
          </ul>
        </li>
        <li><a class="nav-link" href="#">Kontakt</a></li>
      </ul>
    </nav>
    <!-- End Nav -->

    <div class="page-wrapper">

    </div>

    <script src="header.js"></script>
  </body>
</html>

为此，我需要两项 JavaScript 操作：一项用于显示主导航，一项用于显示下拉菜单。第一个工作正常。然而，第二个虽然两个动作有点相同，但不起作用。

我测试了一下，发现问题与第一个 ul 中的 classList.toggle 函数寻址 id 或 class 有关，因为该函数工作正常ul 之外的所有内容。

非常感谢有人帮助我，因为我自己也无法解决问题，也无法在网上找到解决方案。

Answer 1

问题在于 css 和特异性。

如果您声明 class .nav-dropdown.active {display:block} 它将正常工作。问题是 .active 和 .nav-dropdown 具有相同的特异性，并且由于 .nav-dropdown 在 .active 之后声明，因此它将始终为准。

我发布的解决方案创建了一个更高特异性的选择器来解决这个问题（这将取代顺序）。

ClassList.toggle 无法在 ul 中工作 (HTML/CSS/JavaScript)

ClassList.toggle not working inside an ul (HTML/CSS/JavaScript)

html

javascript

css

navigation

html-lists