css实现手风琴效果代码

以下是一个简单的CSS实现手风琴效果的代码：

HTML代码：

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

CSS代码：

.accordion {
  width: 100%;
}

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

.accordion-title {
  margin: 0;
  padding: 10px;
  background-color: #ccc;
  color: #fff;
  cursor: pointer;
}

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

.accordion-item.active .accordion-content {
  max-height: 500px; /* 设置一个足够大的高度 */
}

JS代码：

var accordionItem = document.querySelectorAll('.accordion-item');

accordionItem.forEach(function(item) {
  var title = item.querySelector('.accordion-title');
  var content = item.querySelector('.accordion-content');
  
  title.addEventListener('click', function() {
    if (item.classList.contains('active')) {
      item.classList.remove('active');
    } else {
      accordionItem.forEach(function(item) {
        item.classList.remove('active');
      });
      
      item.classList.add('active');
    }
  });
});

此代码段实现了一个简单的手风琴效果，当点击某个标题时，其对应的内容部分会展开（由于设置了最大高度为0，所以展开时会出现动画效果），其他的内容则会收起。