js手风琴打开关闭

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-button">标题1</button>
    <div class="accordion-content">
      内容1...
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-button">标题2</button>
    <div class="accordion-content">
      内容2...
    </div>
  </div>
  <!-- 更多手风琴项 -->
</div>

.accordion-content {
  display: none; /* 默认隐藏内容 */
}

.accordion-content.active {
  display: block; /* 展开时显示内容 */
}

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    // 获取当前按钮对应的内容区域
    const content = button.nextElementSibling;

    // 切换内容的显示状态
    content.classList.toggle('active');

    // 如果有其他手风琴项是展开的，则关闭它们
    document.querySelectorAll('.accordion-content.active').forEach(item => {
      if (item !== content) {
        item.classList.remove('active');
      }
    });
  });
});