單擊特定元素時如何確保僅刪除 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)
    })
})