Итак, я новичок в 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, обращающейся к id или класс внутри первого ul, потому что функция прекрасно работает со всем, что находится за пределами ul.
Я был бы очень признателен, если бы кто-то помог мне, так как я не могу понять это самостоятельно и не могу найти решение для этого онлайн.