原生JS实现点击accordion-item-header为对应accordion-item加active类

核心逻辑 #

点击.accordion-item-header时，别去全局查找.accordion-item，直接通过当前点击的header获取它的直接父元素，只操作这一个父元素，就不会影响其他手风琴项了。

具体代码实现 #

方案一：事件委托（推荐，性能更优） #

把点击事件绑定在手风琴的父容器上，利用事件冒泡统一处理所有header的点击：

document.querySelector('.accordion').addEventListener('click', function(e) {
  // 确认点击目标是header元素（包含点击header内部子元素的情况）
  const header = e.target.closest('.accordion-item-header');
  if (!header) return;
  
  // 获取当前header对应的父元素
  const accordionItem = header.parentElement;
  
  // 同时切换header和父元素的active类
  header.classList.toggle('active');
  accordionItem.classList.toggle('active');
});

方案二：逐个绑定事件 #

适合静态页面，若手风琴项是动态生成的，需在新增元素后重新绑定：

// 获取所有header元素
const allHeaders = document.querySelectorAll('.accordion-item-header');

allHeaders.forEach(header => {
  header.addEventListener('click', function() {
    // this指向当前点击的header，直接取它的父元素
    const parentItem = this.parentElement;
    
    // 切换两个元素的active类
    this.classList.toggle('active');
    parentItem.classList.toggle('active');
  });
});

为啥之前的方法失效？ #

• 用querySelector('.accordion-item')只会匹配页面中第一个符合条件的元素，所以只能修改第一个手风琴项。
• 用querySelectorAll('.accordion-item')会选中所有手风琴项，点击一个就全改了，因为没把当前点击的header和对应的父元素关联起来。

配套SCSS示例（实现父元素背景切换） #

.accordion-item {
  background-color: #ffffff;
  transition: background-color 0.3s ease;
  
  // 父元素激活时的背景色
  &.active {
    background-color: #f8f9fa;
  }
  
  .accordion-item-header {
    // header基础样式
    padding: 1rem;
    cursor: pointer;
    
    &.active {
      // header激活时的样式，比如箭头旋转
      .arrow-icon {
        transform: rotate(180deg);
      }
    }
  }
  
  .accordion-item-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    
    // 父元素激活时展开内容
    .accordion-item.active & {
      height: auto;
      padding: 0 1rem 1rem;
    }
  }
}

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