css实现手风琴效果

要实现手风琴效果，你可以使用CSS的过渡效果和伪类来实现。以下是一个简单的示例：

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 {
  width: 300px;
}

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

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

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item.active .accordion-content {
  max-height: 500px; /* 设置一个足够高的值，以展开内容 */
}

JavaScript代码（可选）：

const accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(item => {
  item.addEventListener('click', () => {
    item.classList.toggle('active');
  });
});

这个示例中，`.accordion` 是手风琴的容器，`.accordion-item` 是每个手风琴项，`.accordion-header` 是标题，`.accordion-content` 是内容。通过给手风琴项添加 `.active` 类来控制内容的展开和收起。

你可以根据实际需求调整样式和动画效果，这只是一个简单的示例供参考。