点击skills__header切换类属性首次有效后续失效问题求助

问题描述 #

点击skills__header元素时，其父元素的类应在skills__open与skills__close间切换，但目前仅首次点击能完成切换，后续点击无任何效果。

错误原因 #

1. 属性名拼写错误：JavaScript中获取元素类名的标准属性是className（小写首字母），原代码误写为ClassName（大写首字母），导致获取的类名始终为undefined，后续状态判断逻辑完全失效。
2. 类操作逻辑存在隐患：直接赋值className覆盖所有类的方式，结合拼写错误后，无法正确识别元素初始状态，导致后续点击无法触发切换。

修复方案 #

基础修正版JavaScript代码

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

function toggleSkills() { 
    // 修正拼写错误：ClassName → className
    let itemClass = this.parentNode.className;
    // 先将所有面板设为关闭状态
    for(let i = 0; i < skillsContent.length; i++){
        skillsContent[i].className = 'skills__content skills__close';
    }
    // 根据点击前的状态切换当前面板
    if(itemClass.includes('skills__close')){
        this.parentNode.className = 'skills__content skills__open';
    }
}

skillsHeader.forEach((el) => {
    el.addEventListener('click', toggleSkills);
});

更健壮的优化版本（使用classList）

用classList操作类更直观，避免手动拼接类名的繁琐和出错：

const skillsHeader = document.querySelectorAll('.skills__header')

function toggleSkills() { 
    const parentContent = this.parentNode;
    // 关闭所有非当前面板
    document.querySelectorAll('.skills__content').forEach(content => {
        if(content !== parentContent){
            content.classList.remove('skills__open');
            content.classList.add('skills__close');
        }
    });
    // 切换当前父元素的状态类
    parentContent.classList.toggle('skills__open');
    parentContent.classList.toggle('skills__close');
}

skillsHeader.forEach(el => el.addEventListener('click', toggleSkills));

配套代码确认 #

HTML结构（无需修改）

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

CSS样式（无需修改）

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

内容的提问来源于stack exchange，提问作者Nahi shady