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

Question

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

我需要在每个具有类 SLUZBY 的元素上都有一个工作脚本，当用户点击它时，它会展开。

是否有任何选项可以让我像上面写的那样做到这一点？

var sluzba = document.getElementsByClassName('sluzba')
var extendedsluzba = document.getElementsByClassName('sluzba-extended')

sluzba.addEventListener('click', () => {
    extendedsluzba.classList.toggle('active')
})

.extended-sluzba {
display: none;
}

.extended-sluzba.active {
display: block;
}

<div class="sluzba">
  Sluzba01
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba02
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba03
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba04
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

Answer 1

您可以使用下面的代码，它的工作和测试。

var sluzba = document.querySelectorAll('.sluzba')
var extendedsluzba = document.querySelectorAll('.extended-sluzba')

sluzba.forEach((e, i) => {
  e.addEventListener('click', () => {
      extendedsluzba[i].classList.toggle('active')
  })
})
  

.extended-sluzba {
display: none;
}

.extended-sluzba.active {
display: block;
}

<div class="sluzba">
  Sluzba01
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba02
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba03
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba04
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>