JavaScript 手风琴

手风琴效果在JavaScript中通常是指通过切换HTML元素的显示和隐藏状态，模拟类似传统手风琴那样展开和折叠的行为。这通常是在网页设计中创建动态交互的一种常见技巧，可以用于展示内容列表、导航菜单等场景。实现手风琴效果的基本步骤如下：

1. **HTML结构**：创建一些包含折叠内容的容器，并设置初始状态为折叠（`display: none;`）。

<div class="accordion">
  <div class="item">
    <button>标题 1</button>
    <p>内容 1</p>
  </div>
  <!-- 添加更多的项 -->
</div>

2. **CSS样式**：定义基本样式和激活时的状态。

.accordion .item {
  display: flex;
  cursor: pointer;
}
.accordion .item.active p {
  display: block;
}

3. **JavaScript处理**：通过添加事件监听器来控制内容的显示和隐藏。

const accordions = document.querySelectorAll('.accordion .item');

accordions.forEach(item => {
  item.querySelector('button').addEventListener('click', function() {
    this.parentElement.classList.toggle('active');
  });
});

在这个例子中，点击按钮时会切换其父元素`.item`的`.active`类，从而改变对应的`<p>`标签的`display`属性，达到切换内容的效果。