小程序 手风琴demo

好的，以下是一个手风琴效果的小程序demo的基本代码：

<view class="accordion">
  <view class="accordion-item" data-index="0" bindtap="toggleAccordion">
    <view class="accordion-header">标题1</view>
    <view class="accordion-content">内容1</view>
  </view>
  <view class="accordion-item" data-index="1" bindtap="toggleAccordion">
    <view class="accordion-header">标题2</view>
    <view class="accordion-content">内容2</view>
  </view>
  <view class="accordion-item" data-index="2" bindtap="toggleAccordion">
    <view class="accordion-header">标题3</view>
    <view class="accordion-content">内容3</view>
  </view>
</view>

.accordion {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.accordion-item {
  display: flex;
  flex-direction: column;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  display: none;
  background-color: #fff;
}

Page({
  data: {
    activeIndex: null
  },
  toggleAccordion: function(e) {
    var index = e.currentTarget.dataset.index;
    if (index === this.data.activeIndex) {
      index = null;
    }
    this.setData({
      activeIndex: index
    });
  }
})

通过CSS实现手风琴效果，当用户点击某个标题时，JS代码会动态更新该标题对应的内容的显示状态。