ClassList.toggle 在 ul (HTML/CSS/JavaScript) 中不起作用
[英]ClassList.toggle not working inside an ul (HTML/CSS/JavaScript)
问题描述
So I'm quite new to JavaScript and I'm trying to make a dropdown navigation bar for mobile devices.
所以我对 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>
For that I need two JavaScript actions: One for the main-nav to display and one for the dropdown to display.为此，我需要两个 JavaScript 操作：一个用于显示主导航，一个用于显示下拉菜单。 The first one works fine.第一个工作正常。 The second one however, although both actions are kind of the same, doesn't work.然而，第二个虽然两个动作有点相同，但不起作用。
I've tested around a little bit and found out that the problem has to do with the classList.toggle function addressing an id or class inside the first ul, because the function works just fine with everything outside the ul.我已经测试了一点，发现问题与 classList.toggle function 在第一个 ul 内寻址 id 或 class 有关，因为 ZC1C425268E68385D1AB5074C1 外的所有内容都可以正常工作。
I'd really appreciate somebody helping me out since I nor can't figure it out by myself neither find a solution for it online.我真的很感谢有人帮助我，因为我自己也无法弄清楚，也无法在网上找到解决方案。
1 个解决方案
解决方案1
0 已采纳 2020-04-25 20:21:28
Problem is with css and specificity.问题在于 css 和特异性。
If you declare a class .nav-dropdown.active {display:block} it will work correctly.如果您声明 class .nav-dropdown.active {display:block}它将正常工作。 The thing is .active and .nav-dropdown have the same specificity and since the .nav-dropdown is declared after .active it will always prevail.问题是.active和.nav-dropdown具有相同的特异性，并且由于.nav-dropdown是在.active之后声明的，因此它将始终占上风。
The solution I posted creates a selector of higher specificity to overcome the problem (which will supersede the order).我发布的解决方案创建了一个更高特异性的选择器来克服问题（这将取代顺序）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.