如何优化我编写的Accordion（手风琴组件）JavaScript代码？

先说说你当前代码里可以改进的几个点：

• 直接判断classList.value === "content open"不够健壮，CSS类的顺序变化就会失效，应该用classList.contains()方法
• 依赖索引关联输入框和内容区块，DOM结构变动后容易出错，建议用数据属性或者DOM层级关系建立关联
• 使用全局变量activeTarget跟踪当前展开项，其实可以直接通过选择器获取当前展开的元素，避免全局变量
• 给每个input单独绑定事件，当项数多的时候性能不如事件委托

优化方案一：利用数据属性+简化逻辑 #

这种方式让输入框和内容区块的关联更清晰，逻辑也更简洁：

<!-- 给input加data-target关联对应content的ID -->
<div class="accordion-container">
  <input type="checkbox" data-target="content1">
  <div id="content1" class="content">内容1</div>

  <input type="checkbox" data-target="content2">
  <div id="content2" class="content">内容2</div>
</div>

// 事件委托，只给父元素绑一次事件
document.querySelector('.accordion-container').addEventListener('click', (e) => {
  if (!e.target.matches('input')) return; // 不是input点击则跳过

  const targetId = e.target.dataset.target;
  const currentContent = document.getElementById(targetId);
  const isOpen = currentContent.classList.contains('open');
  const activeContent = document.querySelector('.content.open');

  // 先关闭所有已展开的内容
  if (activeContent) activeContent.classList.remove('open');
  // 如果当前内容没展开就打开，已展开则保持关闭
  if (!isOpen) currentContent.classList.add('open');
});

优化方案二：基于DOM结构关联（无需数据属性） #

如果你的input和content是相邻的兄弟节点，比如：

<div class="accordion-item">
  <input type="checkbox">
  <div class="content">内容</div>
</div>
<div class="accordion-item">
  <input type="checkbox">
  <div class="content">内容</div>
</div>

可以直接通过DOM关系获取对应的content，不用额外加属性：

document.querySelectorAll('.accordion-item').forEach(item => {
  const input = item.querySelector('input');
  const content = item.querySelector('.content');

  input.addEventListener('click', () => {
    const isOpen = content.classList.contains('open');
    // 关闭其他所有展开的内容
    document.querySelectorAll('.content.open').forEach(el => el.classList.remove('open'));
    // 切换当前内容的展开状态
    content.classList.toggle('open', !isOpen);
  });
});

核心优化点总结 #

• 用classList.contains()、classList.toggle()替代直接操作class字符串，更可靠
• 避免依赖索引关联元素，改用数据属性或DOM结构，代码更健壮
• 优先考虑事件委托，减少事件监听数量，提升性能
• 简化逻辑分支，让代码更易读和维护

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