Когда нажата одна выпадающая кнопка, show class применяется ко всему содержимому раскрывающегося списка, несмотря на то, что он применяется только к дочернему раскрывающемуся содержимому.
Использование другого имени класса для другого раскрывающегося списка, кажется, работает, но в этом случае кодстановится огромным.
//Working JS (But using multiple classnames)
const homeBtn = document.querySelector(".home-btn");
const aboutBtn = document.querySelector(".about-btn");
const homeContent = document.querySelectorAll(".home-content");
const aboutContent = document.querySelectorAll(".about-content");
let showDropdown = false;
homeBtn.addEventListener("click", toggleHome);
aboutBtn.addEventListener("click", toggleAbout);
function toggleHome() {
if (!showDropdown) {
homeContent.forEach(item => item.classList.add("show"));
showDropdown = true;
} else {
homeContent.forEach(item => item.classList.remove("show"));
showDropdown = false;
}
}
function toggleAbout() {
if (!showDropdown) {
aboutContent.forEach(item => item.classList.add("show"));
showDropdown = true;
} else {
aboutContent.forEach(item => item.classList.remove("show"));
showDropdown = false;
}
}
.sideitem {
background: orange;
padding: 10px 0 0 10px;
border-bottom: 1px solid #fff;
}
.dropdown-btn {
padding: 5px;
cursor: pointer;
}
.dropdown-content {
display: none;
}
.dropdown-content.show {
display: block;
}
.dropdown-content a {
display: block;
color: #fff;
padding: 5px;
border-bottom: 1px solid #fff;
margin-left: 20px;
}
.dropdown-content a:hover {
background: #fa0;
color: #00f;
}
<ul class="sidelist">
<li class="sideitem">
<div class="dropdown-btn home-btn"> Home<i class="fas fa-caret-down"></i></div>
<div class="dropdown-content home-content">
<a href="#slider">Slider</a>
<a href="#testimonal">Testimonal</a>
</div>
</li>
<li class="sideitem">
<div class="dropdown-btn about-btn"> About<i class="fas fa-caret-
down"></i></div>
<div class="dropdown-content about-content">
<a href="#slider">About Us</a>
<a href="#testimonal">Our Team</a>
</div>
</li>
</ul>
Есть ли простой способ решить эту проблему, несмотря на использование большого кода?