Javascript如何向单击的元素添加活动类并隐藏所有其他类

我有一个列表项菜单，当我单击其中一个时，它会得到一个活动类，而我希望所有其他列表项都隐藏起来，但我不知道如何做到这一点

以下是我目前的脚本：

const items = document.querySelectorAll('.menu-item');

items.forEach((item) => {
   item.addEventListener('click', (e) => {
      item.classList.toggle('active')

      // HIDE ALL OTHER "item"-elements
  })
});

---

有人能帮我吗？

你可以使用

document.getElementsByClassName

来做这件事

这方面的一个例子是这样的

document.getElementsByClassName('.menu-item')[0].style.visibility = 'hidden';

---

我认为您可以像这样实现该功能

 const items = document.querySelectorAll('.menu-item');

items .forEach(item => {
  item.addEventListener("click", function() {   
   items .forEach(a=>{
      a.classList.remove("active");
      a.style.display = 'none'; 
    });
     item.classList.add("active");
     item.style.display = 'block'; 
    
  });  
});

---

您可以将此函数用于比较索引和切换类
我在示例中使用了颜色：

const items=document.querySelectorAll（'.menu项'）；
items.forEach（（item，idx）=>{
item.addEventListener（'click'，（）=>{
Togglective（项目，idx）；
});
});
函数ToggleActive（el，索引）{
el.classList.toggle（'active'）；
items.forEach（（item，idx）=>{
如果（idx！==索引）{
item.classList.remove（“活动”）；
}
});
}

.active{
颜色：蓝色；
}

菜单1
菜单2
菜单3
菜单4

试试这个

const items=document.queryselectoral（“.menu项”）；
items.forEach（（项目）=>{
item.addEventListener（“单击”，（e）=>{
item.classList.toggle（“活动”）；
让itemsArray=[…items]；
让数组=itemsArray.filter（（item）=>item！==e.target）；
array.forEach（（elem）=>{
//切换隐藏
elem.hidden=！elem.hidden；
});
});
});
1
2.
3.
4.
5
您只需要侦听父元素（此处为
ul
）上的事件，然后可以使用
closest（）
查找需要激活的元素


const ul=document.querySelector（'ul'）；
ul.addEventListener（'click'，e=>{
e、 预防默认值（）；
设li=e.target.nexist（'li'）；
如果（李）{
ul.queryselectoral（'li'）.forEach（elm=>elm.classList.remove（'active'））；
li.classList.add（'active'）；
}
});
li.active a{
颜色：红色；
}





没有理由更改
显示
。如果OP想要隐藏没有
活动的
类的元素，这就是CSS的用途。：-）我原以为@ST80首先要显示所有元素，然后在单击项目时隐藏所有元素，但单击的元素除外。@etsukosui您完全正确！！：-）@EtsukoSusui-对！这也是CSS的作用
.menu项{display:none；}
和
.menu-item.active{display:block；}
:-）那么所有的元素都不会在第一时间显示。