Блог

Я изо всех сил пытаюсь исправить эту проблему. Я создал навигацию с основными пунктами меню на основе основного меню, в котором вы нажимаете на подменю с пунктами меню, которые должны отображаться, в которых содержатся данные для этого пункта меню.

Заголовок подменю меняется, но я хочу переключаться между подменю add active и remove при переключении назад и вперед.

Мой 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);
})();
  

Мой 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;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>
  

Моя локальная среда: http://00cfad965a36.ngrok.io /

Как я могу это исправить?

Ваш обратный вызов для e.target point at <li> не <a> убедитесь, что вы обновили статический класс для первого просмотра.

Попробуйте обновить свой оператор с помощью этого кода

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

Реализация активного класса

 // 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");  
}
    })
  };
  

Живой пример: codepen.io