js实现折叠面板

<div class="accordion">
  <div class="accordion-item">
    <button id="accordion-button-1" aria-expanded="false">面板1</button>
    <div class="accordion-content">
      面板1的内容...
    </div>
  </div>
  <div class="accordion-item">
    <button id="accordion-button-2" aria-expanded="false">面板2</button>
    <div class="accordion-content">
      面板2的内容...
    </div>
  </div>
  <!-- 可以继续添加更多面板 -->
</div>

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

.accordion-button[aria-expanded="true"] + .accordion-content {
  display: block; /* 当按钮的aria-expanded属性为true时显示内容 */
}

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    // 切换aria-expanded属性
    const expanded = button.getAttribute('aria-expanded') === 'true' || false;
    button.setAttribute('aria-expanded', !expanded);

    // 折叠或展开相邻的内容面板
    const content = button.nextElementSibling;
    content.style.display = expanded ? 'none' : 'block';
  });
});