無法使用querySelectorAll打開下拉選單

我有一個帶有兩個下拉選單的移動導航。這是導航的標記：

<div id="mobile-menu" class="mobile-menu container fixed">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li class="dropdown">
                            <a href="#">Articles <i class="bi bi-chevron-down"></i></a>
                            <ul class="submenu hidden">
                                <li><a href="#">Submenu item 1</a></li>
                                <li><a href="#">Submenu item 2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Contact</a></li>

                        <li class="dropdown">
                            <a href="#">My account <i class="bi bi-chevron-down"></i></a>
                            <ul class="submenu hidden">
                                <li><a href="#">Dashboard</a></li>
                                <li><a href="#">Profile</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

單擊下拉選單應打開/展開。最初我抓住了這樣的下拉和子選單類：

const mobileDropdown = document.querySelector(".dropdown");
const mobileSubMenu = document.querySelector('.submenu');

并使用事件監聽器來切換只是一個顯示的“隱藏”類：無

mobileDropdown.addEventListener('click', () => {
    mobileSubMenu.classList.toggle('hidden');
});

問題在于這只會打開第一個下拉選單，而我無法打開第二個。

當我嘗試使用 querySelectorAll 而不是僅使用 querySelector 時，我收到此錯誤：

未捕獲的 typeError addEventListener 不是函式

在這里，我使用 querySelectorAll 閱讀了我需要使用 for 或 foreach 回圈。

但我想我搞砸了。我試過這個：

const mobileDropdown = document.querySelectorAll(".dropdown");
const mobileSubMenu = document.querySelector('.submenu');

mobileDropdown.forEach(md => md.addEventListener('click', () => {
    mobileSubMenu.classList.toggle('hidden');
}));

現在我沒有收到錯誤，我可以打開第一個下拉選單，但是當我嘗試打開第二個下拉選單時，第一個會打開。我究竟做錯了什么？提前致謝。

uj5u.com熱心網友回復：

您的代碼中的問題是每個mobileDropdownclickEvent 都鏈接到第一個submenu，您應該像這樣將mobileDropdownclickEvents 鏈接到他們的submenu孩子

document.querySelectorAll(".dropdown").forEach(md => md.addEventListener('click', () => {
  md.querySelector(".submenu").classList.toggle('hidden');
}));

.hidden {
  visibility: hidden;
}

<div class="mobile-menu container fixed" id="mobile-menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li class="dropdown">
            <a href="#">Articles <i class="bi bi-chevron-down"></i></a>
            <ul class="submenu hidden">
                <li><a href="#">Submenu item 1</a></li>
                <li><a href="#">Submenu item 2</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>

        <li class="dropdown">
            <a href="#">My account <i class="bi bi-chevron-down"></i></a>
            <ul class="submenu hidden">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#">Profile</a></li>
            </ul>
        </li>
    </ul>
</div>

uj5u.com熱心網友回復：

這是一個解決方案。您必須在“下拉”元素上收聽“子選單”的“點擊”事件。

const mobileDropdown = document.querySelectorAll(".dropdown");

  mobileDropdown.forEach((md) => {
    md.addEventListener("click", () => {
      const mobileSubMenu = md.querySelector(".submenu");
      mobileSubMenu.classList.toggle("hidden");
    });
  });

uj5u.com熱心網友回復：

mobileSubMenu 永遠是第一位的！

標籤：javascript

上一篇：如何在typescriptReactJs中將一個類的物件轉換為另一個類的物件？

下一篇：將js類匯入Svelte組件的正確方法是什么？