Ich bin also ziemlich neu in JavaScript und versuche, eine Dropdown-Navigationsleiste für mobile Geräte zu erstellen.
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>Dafür benötige ich zwei JavaScript-Aktionen: Eine für die Anzeige des Hauptnavigationssystems und eine für die Anzeige des Dropdown-Menüs. Der erste funktioniert gut. Die zweite funktioniert jedoch nicht, obwohl beide Aktionen irgendwie gleich sind.
Ich habe ein wenig herumgetestet und herausgefunden, dass das Problem damit zusammenhängt, dass die Funktion classList.toggle eine ID oder Klasse innerhalb der ersten ul anspricht, da die Funktion mit allem außerhalb der ul einwandfrei funktioniert.
Ich würde mich sehr freuen, wenn mir jemand hilft, da ich es weder selbst herausfinden kann noch online eine Lösung dafür finde.
Problem ist mit CSS und Spezifität.
Wenn Sie eine Klasse deklarieren .nav-dropdown.active {display:block}, wird sie korrekt funktionieren. Das Ding ist .activeund .nav-dropdownhat die gleiche Spezifität und da das danach .nav-dropdowndeklariert wird .active, wird es immer Vorrang haben.
Die von mir gepostete Lösung erstellt einen Selektor mit höherer Spezifität, um das Problem zu lösen (der die Reihenfolge ersetzt).
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句