Vanilla JS从“ active”类之外的所有其他元素中删除该类 [英] Vanilla JS remove class from all other elements besides 'active' class
问题描述
我正在尝试使用Vanilla JavaScript构建下拉菜单,但我想不出向单击的下拉菜单添加活动类别的最佳方法,然后同时从中删除所有其他活动类别兄弟元素。
I'm trying to build a dropdown menu with Vanilla JavaScript and I can't figure out the best way to add a class of active to the clicked dropdown menu, and then at the same time remove all other active classes from the sibling elements.
到目前为止,这是我所掌握的JS:
so far this is what I have as far as JS:
var _dropdowns = [].slice.call(document.getElementsByClassName('main-menu-li_dropdown'));
_dropdowns.forEach(function(dropdowns) {
dropdowns.addEventListener('click', function( event ){
event.preventDefault();
console.log(this !== event.target);
this.classList.toggle('active');
});
});
这是我的标记:
<nav id="main-nav">
<ul>
<li class="main-menu-li_dropdown">
<a href="">link</a>
<ul class="sub-nav">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</li>
<li class="main-menu-li_dropdown">
<a href="">link</a>
<ul class="sub-nav">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</li>
<li class="main-menu-li_dropdown">
<a href="">link</a>
<ul class="sub-nav">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</li>
<li class="main-menu-li_dropdown">
<a href="">link</a>
<ul class="sub-nav">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</li>
<li class="main-menu-li_dropdown">
<a href="">link</a>
<ul class="sub-nav">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</li>
</ul>
</nav>
推荐答案
您可以遍历所有项目并删除类,然后将该类添加到单击的项目中。
You can loop through all of the items and remove the class, then add the class to the item that was clicked.
这里是一个示例:
http://jsbin.com/rivogelaqu/edit?html,js,output
let dropDowns = Array.from(document.querySelectorAll('.main-menu-li_dropdown'));
const handleClick = (e) => {
e.preventDefault();
dropDowns.forEach(node => {
node.classList.remove('active');
});
e.currentTarget.classList.add('active');
}
dropDowns.forEach(node => {
node.addEventListener('click', handleClick)
});
编辑:替代点击处理程序
这里是一个替代的单击处理程序,它避免了每次单击时的循环,而只是检查元素。
Here is an alternative click handler that avoids a loop on each click and just checks for the element. May be more performant.
const handleClick = (e) => {
e.preventDefault();
const active = document.querySelector('.active');
if(active){
active.classList.remove('active');
}
e.currentTarget.classList.add('active');
}
这篇关于Vanilla JS从“ active”类之外的所有其他元素中删除该类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!