Javascript 如果主菜单项处于活动状态,如何将活动类添加到子菜单列表中?
我正在努力解决这个问题。我已经基于主菜单创建了带有主菜单项的导航,在主菜单中,您可以单击带有应显示的菜单项的子菜单,该菜单项包含此菜单项的数据 子菜单标题正在更改,但我想在来回切换时在“添加活动”子菜单和“删除”子菜单之间切换 我的JS:Javascript 如果主菜单项处于活动状态,如何将活动类添加到子菜单列表中?,javascript,Javascript,我正在努力解决这个问题。我已经基于主菜单创建了带有主菜单项的导航,在主菜单中,您可以单击带有应显示的菜单项的子菜单,该菜单项包含此菜单项的数据 子菜单标题正在更改,但我想在来回切换时在“添加活动”子菜单和“删除”子菜单之间切换 我的JS: (() => { const header = document.getElementById('header'); const headerHamburger = header.querySelector('.header__hambu
(() => {
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 & 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>
零排放标准
我的本地环境:
如何解决此问题?您对
e.target的回调指向非您对e.target的回调指向非
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");
}
})
};