前端实现手风琴效果

手风琴效果是一种常见的前端交互效果，可以通过 CSS 和 JavaScript 实现。下面是一种常见的实现方式：

HTML 结构：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">标题1</div>
    <div class="accordion-content">内容1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">标题2</div>
    <div class="accordion-content">内容2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">标题3</div>
    <div class="accordion-content">内容3</div>
  </div>
</div>

CSS 样式：

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion-header {
  background-color: #f0f0f0;
  cursor: pointer;
  padding: 10px;
}

.accordion-content {
  display: none;
  padding: 10px;
}

JavaScript 代码：

var accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(function(header) {
  header.addEventListener('click', function() {
    var content = this.nextElementSibling;
    if (content.style.display === 'block') {
      content.style.display = 'none';
    } else {
      content.style.display = 'block';
    }
  });
});

这段代码的作用是为所有的 `.accordion-header` 元素绑定了一个点击事件，当点击时切换其相邻的 `.accordion-content` 的显示状态。具体实现可以根据需要进行修改。