如果主菜单项处于活动状态，如何将 ACTIVE 类添加到子菜单列表中？

Question

I am struggling to fix this issue. I have created navigation with primary menu items based on a primary menu in which you click on a sub-menu with menu items that should be displayed which holds the data for this menu item.

The Submenu title is changing but I want to switch between sub-menu add active and remove when you switch back and forth.

My JS:

(() => {
    const header = document.getElementById('header');
    const headerHamburger = header.querySelector('.header__hamburger');

    const headerMenu = header.querySelector('.header__menu');
    const headerMenuText = headerMenu.querySelector('span');

    const navigation = document.querySelector('.navigation');
    const navigationSideMenu = navigation.querySelector(
        '.navigation__sidemenu'
    );

    const navigationSideItems = [
        ...document.querySelectorAll('.navigation__item')
    ];

    const navigationSubList = document.querySelector('.navigation__sublist');

    const navigationTitle = document.querySelector('.navigation__title');

    const toggleSubMenu = (item, e) => {
        e.preventDefault();

        const link = item.querySelector('.navigation__link');
        const active = document.querySelector('.navigation__link--active');

        if (active) {
            active.classList.remove('navigation__link--active');
        }

        e.currentTarget.classList.add('navigation__link--active');

        navigationTitle.innerHTML = link.innerText;
    };

    navigationSideItems.forEach((item, i) => {
        item.addEventListener('click', toggleSubMenu.bind(null, item));
    });

    const toggleMenu = (e) => {
        e.preventDefault();

        headerHamburger.classList.toggle('active');

        if (headerMenu.getAttribute('data-open') === headerMenuText.innerHTML) {
            headerMenuText.innerHTML = headerMenu.getAttribute('data-close');
            navigation.classList.add('navigation--active');
        } else {
            headerMenuText.innerHTML = headerMenu.getAttribute('data-open');
            navigation.classList.remove('navigation--active');
        }
    };

    headerMenu.addEventListener('click', toggleMenu);
})();

My HTML:

 <div class="navigation">
        <div class="navigation--inner">
          <div class="wrapper">
                <div class="navigation--content">
                    <aside class="navigation__sidemenu">
                        <ul class="navigation__list">
                            <li class="navigation__item"><a class="navigation__link navigation__link--active" href="#"><i class="navigation__arrow"></i> Zero Emissie Stadslogistiek</a></li>
                            <li class="navigation__item"><a class="navigation__link" href="#"><i class="navigation__arrow"></i> Kennis</a></li>
                            <li class="navigation__item"><a class="navigation__link" href="#"><i class="navigation__arrow"></i> Tips &amp; tools</a></li>
                            <li class="navigation__item"><a class="navigation__link" href="#"><i class="navigation__arrow"></i> Doe mee!</a></li>
                            <li class="navigation__item"><a class="navigation__link" href="#"><i class="navigation__arrow"></i> Community</a></li>
                            <li class="navigation__item"><a class="navigation__link" href="#"><i class="navigation__arrow"></i> Over ons</a></li>
                        </ul>
                    </aside>
                    <main class="navigation__menu">
                        <h2 class="navigation__title">Zero Emissie Stadslogistiek</h2>
                        <ul data-menu="1" class="navigation__sublist">
                            <li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Alles over Zero Emissie Stadslogistiek</a></li>
                            <li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Stappenplan ZES</a></li>
                            <li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Convenant ZES</a></li>
                            <li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> ZES-Zone en toegangseisen<span></span></a></li>
                        </ul>

                        <ul data-menu="2" class="navigation__sublist">
                            <li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Alles over kennis</a></li>
                            <li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Stappenplan kennis</a></li>
                            <li class="navigation__subitem"><a class="navigation__sublink" href="#"><i class="navigation__arrow"></i> Convenant kennis</a></li>
                        </ul>
                    </main>
                </div>
          </div>
        </div>
    </div>

My local environment: http://00cfad965a36.ngrok.io/

How can I fix this?

Answer 1

Your callback for e.target point at <li> not <a> make sure you update static class for first view.

Try to update your statement with this code

if (active) { 
active.classList.remove('navigation__link--active');
e.currentTarget.classList.add('navigation__link--active');
} 
// No match occurred 
else {            
e.currentTarget.classList.add('navigation__link--active');         
}

Active Class Implementation

// Capture all elements of <a> output should be in an array
var triggers = document.getElementsByClassName("navigation__link");

// Create new variable i stands for index to be used in for loop
var i;

// Loop through all elements been found in box variable  
for (i = 0; i < triggers.length; i++) {

// Add Event Listener of Click for <a> elements found in the variable box
  triggers[i].addEventListener("click", function(e) {

// Add e in callback function trace the element triggered this event
// In other words, which button has been clicked

var clicked = 
    e.target;

// default active element otherwise or else will not remove any active class

    if (document.querySelector(".active")) { 
document.querySelector(".active").classList.remove("active");

document.querySelector(clicked).classList.toggle("active");  
  
// Not found any active css class (box)                                      
    } else {
document.querySelector(clicked).classList.toggle("active");  
}
    })
  };

Live Example: codepen.io