Loop through dropdown menu items to add class to next sibling in vanilla JS

Question

I am learning JavaScript and am trying to wrap my head around creating a nav megamenu. Basically, each button has a div after it that contains the megamenu content. Hovering OR clicking on the button adds a class to the dropdown (I could also use a show/hide within the JS, not sure which is better). The class adds opacity and visibility to the div.

I've created a "container" variable so it's only listening within the navbar, and then looping through the buttons to add the listener with nextElementSibling, but I can't seem to get it working.

Markup:

<nav id="main-nav">
    <div class="nav-content">
        
        <div class="nav-item">
            <button class="nav-dropdown">Services</button>
            <div class="nav-submenu">
                (Links)
            </div>
        </div>

        <div class="nav-item">
            <button class="nav-dropdown">Locations</button>
            <div class="nav-submenu">
                (Links)
            </div>
        </div>

        <div class="nav-item">
            <button class="nav-dropdown">About Us</button>
            <div class="nav-submenu">
                (Links)
            </div>
        </div>
        
    </div>
</nav>

JS:

( function() {
    // initiating vars
    var desktop, mobile, container;

    // Breakpoints
    desktop = window.matchMedia("(min-width: 769px)");
    mobile = window.matchMedia("(max-width: 768px)");

    // Target only navbar
    container = document.getElementById( 'main-nav' ); 
    if ( ! container ) {
        return;
    }

    // Desktop dropdown click controls
    if (desktop.matches) {

        // only look for .nav-dropdown class
        const desktopParents = container.querySelectorAll(".nav-dropdown");

        // get each instance of .nav-dropdown
        for (const desktopParent of desktopParents) {
            
            // if a button is clicked, add class to that button's dropdown only
            document.addEventListener('click', function(event) {

                // getting correct dropdownby targeting next sibling of button (div.nav-submenu) 
                var dropdown = desktopParent.nextElementSibling;
                var desktopParent = desktopParent.contains(event.target);
            
                // adding and removing show dropdown class
                if (dropdown.classList.contains('nav-active')) {
                    dropdown.classList.remove('nav-active');
                
                } else {
                    dropdown.classList.add('nav-active');
                
                }
            });

        }

    }
    
}() );

Answer 1

Your event listener is attached to the whole document so the event is triggered when someone clicks anywhere on the page. Change document to your button variable desktopParent for the events to be triggered when the button is clicked. You can refer to the button element using this inside the event listener's callback function.

desktopParent.addEventListener('click', function(event) {

                // getting correct dropdownby targeting next sibling of button (div.nav-submenu) 
                var dropdown = this.nextElementSibling;
                var desktopParent = this.contains(event.target);

...

}

Here is an example