实现手风琴html css js4

实现一个简单的手风琴效果通常需要HTML、CSS和JavaScript配合。这里是一个基本步骤的描述：

**HTML结构**:

<div class="accordion">
  <div class="item">
    <button id="item1">标题1</button>
    <div class="content" style="display:none;">
      内容1
    </div>
  </div>
  <!-- 可以添加更多项 -->
</div>

**CSS样式**:

.accordion {
  width: 100%;
}
.item {
  border-bottom: 1px solid #ccc;
}
.item .content {
  padding: 10px;
}
.open {
  display: block;
}

**JavaScript (使用纯JS或jQuery)**:

document.addEventListener("DOMContentLoaded", function() {
  const accordions = document.querySelectorAll(".item");
  
  // 遍历每个按钮
  accordions.forEach(function(item) {
    item.querySelector("button").addEventListener("click", function(e) {
      e.preventDefault();
      this.classList.toggle("open");
      const content = this.nextElementSibling;
      content.classList.toggle("open");
    });
  });
});

在这个例子中，当用户点击标题时，会切换内容部分的显示状态（通过添加或移除`open`类）。初始时，所有内容都是隐藏的。