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

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');
                
                }
            });

        }

    }
    
}() );

Via Active questions tagged javascript - Stack Overflow https://ift.tt/NuzpWm1