JavaScript：按类单击元素不起作用

我有一个简单的JavaScript，它可以用类EXTENDED-SLUZBY扩展元素

我需要在每个元素上使用SLUZBY类编写一个工作脚本，当用户单击它时，它将展开

有没有办法让我像上面写的那样做到这一点

var sluzba=document.getElementsByClassName（'sluzba'））
var extendedsluzba=document.getElementsByClassName（'sluzba-extended'）
sluzba.addEventListener（'单击'，（）=>{
extendedsluzba.classList.toggle（'active'）
})

.extendedsluzba{
显示：无；
}
.extended-sluzba.active{
显示：块；
}

Sluzba01
延伸部分
Sluzba02
延伸部分
Sluzba03
延伸部分
Sluzba04
延伸部分

var sluzba=document.getElementsByClassName（'sluzba'）

返回元素数组。Loop将实现以下功能：

var sluzba = document.getElementsByClassName('sluzba');
for (let i = 0; i < sluzba.length; i++) {
   sluzba[i].addEventListener('click', () => {
     extendedsluzba.classList.toggle('active');
   });
}

var sluzba=document.getElementsByClassName（'sluzba'）；
for（设i=0；i{
extendedsluzba.classList.toggle（'active'）；
});
}

您可以使用下面的代码对其进行工作和测试

var sluzba=document.queryselectoral（'.sluzba'））
var extendedsluzba=document.queryselectoral（'.extendedsluzba'））
sluzba.forEach（（e，i）=>{
e、 addEventListener（'单击'，（）=>{
extendedsluzba[i].classList.toggle（'active'）
})
})

.extendedsluzba{
显示：无；
}
.extended-sluzba.active{
显示：块；
}

Sluzba01
延伸部分
Sluzba02
延伸部分
Sluzba03
延伸部分
Sluzba04
延伸部分

getElementsByClassName返回一个节点数组，因此需要将addEventListener和classList.toggle包装在forEach循环中