html用jQuery制作一个赤橙红绿青蓝紫的手风琴效果

可以使用jQuery的事件监听和CSS的过渡效果来实现手风琴效果。以下是一个简单的示例代码：

HTML代码：

<div class="accordion">
  <div class="accordion-header red">赤</div>
  <div class="accordion-content">赤的内容</div>
  <div class="accordion-header orange">橙</div>
  <div class="accordion-content">橙的内容</div>
  <div class="accordion-header yellow">黄</div>
  <div class="accordion-content">黄的内容</div>
  <div class="accordion-header green">绿</div>
  <div class="accordion-content">绿的内容</div>
  <div class="accordion-header cyan">青</div>
  <div class="accordion-content">青的内容</div>
  <div class="accordion-header blue">蓝</div>
  <div class="accordion-content">蓝的内容</div>
  <div class="accordion-header purple">紫</div>
  <div class="accordion-content">紫的内容</div>
</div>

CSS代码：

.accordion {
  display: flex;
  flex-wrap: wrap;
}

.accordion-header {
  flex: 1;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.5s ease;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.cyan {
  background-color: cyan;
}

.blue {
  background-color: blue;
}

.purple {
  background-color: purple;
}

.accordion-content {
  flex: 1;
  height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
}

JavaScript代码：

$('.accordion-header').click(function() {
  var content = $(this).next('.accordion-content');
  var isOpen = content.height() > 0;
  $('.accordion-content').height(0);
  if (!isOpen) {
    content.height(content.prop('scrollHeight'));
  }
});

效果演示：https://codepen.io/linzhixuan/pen/OJjGqjb