单击特定元素时如何确保仅删除 1 个导航栏？

Question

我有这种情况，我单击导航栏中的按钮并希望相应的导航栏下降，我起草了 HTML 并尝试为此创建 JavaScript 但未能成功实施。

 const dropdownButtons = document.querySelectorAll(".dropdownButton"); const dropdownNav = document.querySelectorAll(".dropdown"); const navBar = document.querySelector("#navBar"); function toggleDropdown() { dropdownNav.forEach((x => x.classList.toggle("show"))) } dropdownButtons.forEach((btn) => { btn.addEventListener("click", (e) => { const button = e.target; toggleDropdown(button) }) })

 @import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300;600&family=Ubuntu:wght@400;500;700&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Overpass', sans-serif; font-family: 'Ubuntu', sans-serif; }:root { --dark-red-cta: hsl(356, 100%, 66%); --light-red-cta: hsl(355, 100%, 74%); --dark-blue-heading: hsl(208, 49%, 24%); --white: hsl(0, 0%, 100%); --grayish-blue-footer: hsl(240, 2%, 79%); --dark-grayish-blue: hsl(207, 13%, 34%); --very-dark-blue: hsl(240, 10%, 16%); } /* NAVBAR */ nav { padding: 2em 10em; } nav img { padding-right: 2em; } nav, .siteNav { display: flex; align-items: center; justify-content: space-between; } ul { list-style-type: none; } li { display: inline; } button img { margin-left: .5em; } button { cursor: pointer; background: none; border: none; color: white; font-size: .9em; } header { text-align: center; background-image: url(/images/bg-pattern-intro-desktop.svg), linear-gradient(100deg, hsl(13, 100%, 72%), hsl(353, 100%, 62%)); background-size: 218%, auto; background-position: 25% 52%; height: 75vh; border-radius: 0 0 0 6em; } header h1 { color: white; font-size: 3em; font-weight: 500; padding: 2em 0.5em 0; } header p { color: white; padding: 0 0 2em 0; }.startButton, .loginButton { background-color: white; color: var(--dark-red-cta); border-radius: 30px; width: 140px; padding: 1.1em; font-weight: bold; }.learnMoreButton { color: white; border-radius: 30px; width: 140px; padding: 1.1em; border: 1px solid var(--white); font-weight: bold; } /* For the drop down */.dropdownItem { position: relative; }.dropdown { position: absolute; background: var(--white); border-radius: 8px; padding: 1em; text-align: left; margin-top: 1em; height: 14em; width: 10em; display: flex; flex-direction: column; justify-content: space-evenly; visibility: hidden; }.show { visibility: visible; }.rotateImg { transform: rotate(90deg); }.dropdown li a { color: black; text-decoration: none; }.dropdown li a:hover { font-weight: bold; }

 <nav> <div class="siteNav"> <img src="/images/logo.svg" alt="Blogr logo"> <ul id="navBar"> <li class="dropdownItem"> <button class="dropdownButton">Product <img src="/images/icon-arrow-light.svg" alt="Drop down arrow"> </button> <ul class="dropdown dropdown-content"> <li><a href="#">Overview</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Marketplace</a></li> <li><a href="#">Features</a></li> <li><a href="#">Integrations</a></li> </ul> </li> <li class="dropdownItem"> <button class="dropdownButton">Company <img src="/images/icon-arrow-light.svg" alt="Drop down arrow"> </button> <ul class="dropdown dropdown-content"> <li><a href="#">About</a></li> <li><a href="#">Team</a></li> <li><a href="#">Our Blog</a></li> <li><a href="#">Careers</a></li> </ul> </li> <li class="dropdownItem"> <button class="dropdownButton">Connect <img src="/images/icon-arrow-light.svg" alt="Drop down arrow"> </button> <ul class="dropdown dropdown-content"> <li><a href="#">Contact</a></li> <li><a href="#">Newsletter</a></li> <li><a href="#">LinkedIn</a></li> </ul> </li> </ul> </div> <div class="login"> <button class="loginButton">Login</button> <button class="signUpButton">Sign Up</button> </div> </nav>

我目前能够成功地对应一次点击并使用这种方法分配正确的 class 但唯一的问题是它会将它添加到所有 3 个下拉菜单中，我只是无法绕过事件冒泡所以会很感激一点手持有这个例子。

我正在遍历按钮，然后触发 function ，然后应该通过更新其可见性来使相对下拉可见。 这有效，它只显示第三个选项，因为它更新了所有 3 个类而不是一个。

我尝试对此使用当前的目标方法，但由于无法将 classList 添加到 e.target，因此无法使其正常工作。 有人能指出我在这个问题上哪里出错了吗？

编辑：添加了 CSS 文件，因为可以理解地查看元素的位置。

Answer 1

传递一个道具索引，以便您将 class .show切换到该特定下拉列表而不是全部

const dropdownButtons = document.querySelectorAll(".dropdownButton");
const dropdownNav = document.querySelectorAll(".dropdown");
const navBar = document.querySelector("#navBar");

function toggleDropdown(ind) {
    dropdownNav[ind].classList.toggle("show")
}

dropdownButtons.forEach((btn, index) => {
    btn.addEventListener("click", (e) => {
        const button = e.target;
        toggleDropdown(index)
    })
})