如何创建可展开的Accordion折叠面板？解决代码点击报错问题

我在编写折叠面板脚本时遇到问题，想要创建的折叠面板样式如下：

现有代码如下：

JavaScript代码 #

var accordionItem = document.querySelectorAll('.accordion-item');
var accordionContent = document.querySelectorAll('.accordion-item_content');
var accordionButton = document.querySelectorAll('.accordion-btn');

for (i = 0; i < accordionButton.length; i++) {
  accordionButton[i].addEventListener('click', () => {
    accordionContent[i].classList.add('opnen')
  })
}

HTML代码 #

<div class="accordion-item">
  <div class="accordion-item_header">
    <h3>Experience</h3>
    <button class="accordion-btn">+</button>
  </div>
  <div class="accordion-item_content container">

  </div>
</div>

点击按钮后控制台报错，错误信息如下：

我需要实现点击折叠面板头部的按钮时，打开对应的内容区域，请问该如何解决？

问题分析与解决方案 #

你的代码存在两个关键问题：

1. 循环闭包陷阱：for循环中使用箭头函数绑定点击事件，箭头函数不会创建独立作用域，当点击触发时循环已结束，i的值等于按钮总数，导致accordionContent[i]为undefined，触发报错。
2. 类名拼写错误：代码中写的opnen是拼写错误，正确类名应为open。

下面是修正后的代码，同时优化了逻辑，让按钮和内容区域的关联更可靠：

方案一：使用块级作用域修复循环问题

var accordionButton = document.querySelectorAll('.accordion-btn');

for (let i = 0; i < accordionButton.length; i++) {
  accordionButton[i].addEventListener('click', () => {
    // 通过按钮向上找到父级折叠面板，再获取对应的内容区域
    const targetContent = accordionButton[i].closest('.accordion-item').querySelector('.accordion-item_content');
    targetContent.classList.toggle('open'); // 用toggle实现点击切换展开/收起状态
  })
}

方案二：使用forEach遍历（更简洁）

document.querySelectorAll('.accordion-btn').forEach(button => {
  button.addEventListener('click', function() {
    // 利用this指向当前点击的按钮，找到对应内容区域
    const content = this.closest('.accordion-item').querySelector('.accordion-item_content');
    content.classList.toggle('open');
  });
});

补充CSS样式

要让折叠效果生效，需要给内容区域添加基础样式和展开状态的样式：

.accordion-item_content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease; /* 添加过渡动画让展开收起更平滑 */
}

.accordion-item_content.open {
  height: auto; /* 或者设置具体的展开高度，比如150px */
}

内容的提问来源于stack exchange，提问作者Maciej Sławiński