如何实现点击手风琴头部时为Accordion Item添加active类？

要实现点击手风琴头部时，同时给整个手风琴项（.accordion-item）添加/移除active类，只需在点击事件中获取头部的父容器，同步切换它的active类即可，具体修改如下：

修改后的JavaScript代码 #

const accordionItemHeaders = document.querySelectorAll(
  ".accordion-item-header"
);

accordionItemHeaders.forEach((accordionItemHeader) => {
  accordionItemHeader.addEventListener("click", () => {
    // 获取当前头部对应的整个手风琴项
    const accordionItem = accordionItemHeader.closest(".accordion-item");
    
    // 同时切换头部和整个项的active类
    accordionItemHeader.classList.toggle("active");
    accordionItem.classList.toggle("active");
    
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if (accordionItemHeader.classList.contains("active")) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
    } else {
      accordionItemBody.style.maxHeight = 0;
    }
  });
});

关键说明 #

• 使用closest(".accordion-item")精准获取当前头部的父容器，相比parentNode更鲁棒，即使后续DOM结构有小调整也能正常工作。
• 调用accordionItem.classList.toggle("active")，让手风琴项的active类和头部的active类同步切换，展开时同时生效，收起时同时移除。

完整示例代码 #

HTML（无需修改）

<div class="question-content_accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">
      Title1
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <p>Text1</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      Title2
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <p>Text2</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      Title3
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <p>Text3</p>
      </div>
    </div>
  </div>
</div>

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