JavaScript Accordion需求修改：将open类触发改为点击accordion_title

核心思路 #

• 将点击事件从.accordion_container转移到.accordion_title上
• 点击标题时，找到其对应的父容器（.accordion_container）来切换open类
• 保留关闭其他已展开容器的原有逻辑

具体代码实现 #

// 获取所有折叠面板的标题元素
const accordionTitles = document.querySelectorAll('.accordion_title');

// 遍历每个标题，绑定点击事件
accordionTitles.forEach(title => {
  title.addEventListener('click', function() {
    // 获取当前标题对应的父级折叠容器
    const currentContainer = this.closest('.accordion_container');
    
    // 切换当前容器的展开/收起状态
    currentContainer.classList.toggle('open');
    
    // 关闭其他所有已展开的容器
    accordionTitles.forEach(otherTitle => {
      const otherContainer = otherTitle.closest('.accordion_container');
      // 排除当前容器，移除open类
      if (otherContainer !== currentContainer && otherContainer.classList.contains('open')) {
        otherContainer.classList.remove('open');
      }
    });
  });
});

代码说明 #

• document.querySelectorAll('.accordion_title')：选中页面中所有折叠面板的标题元素
• this.closest('.accordion_container')：通过当前点击的标题，向上查找最近的父级折叠容器（兼容性好，适合初学者理解）
• classList.toggle('open')：自动切换当前容器的open类，实现展开/收起
• 第二个forEach遍历所有标题，找到对应容器后排除当前容器，移除open类，实现“关闭其他展开面板”的逻辑

额外优化（事件委托写法） #

如果你的折叠面板是动态添加的（比如通过JS生成），用事件委托更高效，不需要重复绑定事件：

// 绑定事件到折叠面板的父容器（需替换成实际的父容器选择器）
document.querySelector('.accordion_wrapper').addEventListener('click', function(e) {
  // 判断点击的是标题元素
  if (e.target.matches('.accordion_title')) {
    const currentContainer = e.target.closest('.accordion_container');
    currentContainer.classList.toggle('open');
    
    // 关闭其他已展开容器
    document.querySelectorAll('.accordion_container.open').forEach(container => {
      if (container !== currentContainer) {
        container.classList.remove('open');
      }
    });
  }
});

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