无法使用 querySelectorAll 打开下拉菜单

Question

I have a mobile navigation with two dropdown menus. Here is the markup of the nav:

<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>

The dropdown menus should open/expand when clicked. Originally I grabbed the dropdown and submnenu classes like this:

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

and used an eventlistener to toggle the "hidden" class which is just a display:none

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

The problem with this is that this will only open the first dropdown menu and I cannot open the second.

When I try to use querySelectorAll instead of just querySelector then i get thiserror:

Uncaught typeError addEventListener is not a function

Here I read that with querySelectorAll I need to use a for or foreach loop.

but i think I'm messing it up. I tried this:

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

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

Now I don't get an error, I can open the first dropdown menu, but when I try to open the second dropdown menu, the first one opens. What am I doing wrong? Thanks in advance.

Answer 1

The problem in your code is that each mobileDropdown 's clickEvent was linked to the first submenu , you should link mobileDropdown 's clickEvents to their submenu children like that

 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>

Answer 2

here is a solution. You have to listen to the 'click' event for "submenu" on the element of "dropdown".

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

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

Answer 3

mobileSubMenu 永远是第一位的！