因此，我对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操作：一个用于显示主导航，另一个用于显示下拉菜单。第一个工作正常。但是，第二个操作虽然两个动作都相同，但是不起作用。
我进行了一些测试，发现问题与classList.toggle函数有关第一个ul内的id或类的寻址有关，因为该函数对ul以外的所有内容都适用。
我非常感谢有人帮助我，因为我自己也无法自己解决，也找不到在线解决方案。
问题在于CSS和特定性。
如果声明一个类.nav-dropdown.active {display:block}，它将正常工作。问题是.active和.nav-dropdown具有相同的特异性，并且由于.nav-dropdown是在.active之后声明的，因此将始终优先使用。
我发布的解决方案创建了一个更高特异性的选择器来解决该问题（它将取代顺序）。