JavaScript Can’t open submenu when using queryselectorall

[dtommy79]

Hi,

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?

 

[OldMan]

Why are you doing things with JS that are the domain of CSS?