HTML操作不起作用的javascript函数

Question

当单击'skills__open‘div时，这个js代码应该将类属性'skills__close’的值更改为'skills__header‘。它在第一次单击时将“skills__open”更改为“skills__close”，但在第一次单击之后，它将无法工作。

Js

const skillsContent = document.getElementsByClassName('skills__content'),
      skillsHeader = document.querySelectorAll('.skills__header')

function toggleSkills(){ 
    let itemClass = this.parentNode.ClassName
    for(i=0; i < skillsContent.length; i++){
        skillsContent[i].className = 'skills__content skills__close'
    }
    if(itemClass === 'skills__content skills__close'){
        this.parentNode.className = 'skills__content skills__open'
    } 
}
skillsHeader.forEach((el) =>{
    el.addEventListener('click', toggleSkills)
});

Html

<div class="skills__content skills__open">
   <div class="skills__header">
</div>
<div class="skills__content skills__close">
    <div class="skills__header">
</div>
<div class="skills__content skills__close">
    <div class="skills__header">
</div>

css

.skills__open .skills__list{
  height: max-content;
  margin-bottom: var(--mb-2-5);
}
.skills__open .skills__arrow{
  transform: rotate(-180deg);
}

没什么大不了的

Answer 1

试一试：

const skillsContents = document.querySelectorAll('.skills__content');

skillsContents.forEach( skc =>
  {
  skc
  .querySelector('.skills__header')
  .addEventListener('click', () =>
    {
    skillsContents.forEach( el =>
      {
      if (skc===el) el.classList.replace('skills__close','skills__open')
      else          el.classList.replace('skills__open','skills__close')
      })
    })
  });