微信小程式 折疊效果

<view class=\'help\'>
  <view class=\'help_item\'>
    <view class=\'title\' data-index=\'1\' catchtap=\'panel\'>
      <view class=\'title_1\'>便簽小程式使用免費嗎</view>
      <view class=\'title_2\'><image src="../../images/{{showIndex == 1 ? \'up\':\'down\'}}.png"></image></view>
    </view>
    <view class=\'detail\' wx:if="{{showIndex == 1}}">便簽小程式是一款免費應用，并承諾永不收費1</view>
  </view>
  <view class=\'help_item\'>
    <view class=\'title\' data-index=\'2\' catchtap=\'panel\'>
      <view class=\'title_1\'>便簽小程式使用免費嗎</view>
      <view class=\'title_2\'><image src="../../images/{{showIndex == 2 ? \'up\':\'down\'}}.png"></image></view>
    </view>
    <view class=\'detail\' wx:if="{{showIndex == 2}}">便簽小程式是一款免費應用，并承諾永不收費2</view>
  </view>
  <view class=\'help_item\'>
    <view class=\'title\' data-index=\'3\' catchtap=\'panel\'>
      <view class=\'title_1\'>便簽小程式使用免費嗎</view>
      <view class=\'title_2\'><image src="../../images/{{showIndex == 3 ? \'up\':\'down\'}}.png"></image></view>
    </view>
    <view class=\'detail\' wx:if="{{showIndex == 3}}">便簽小程式是一款免費應用，并承諾永不收費3</view>
  </view>
</view>
      

　　css

.help {
  width: 700rpx;
  margin: 0 auto;
}
.help .help_item {
  margin: 10rpx auto;
}
.help .help_item .title {
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #e2e2e2;
  display: flex;
}
.help .help_item .title .title_1 {
  width: 630rpx;
  height: 60rpx;
  padding-left: 20rpx;
}
.help .help_item .title .title_2 {
  width: 50rpx;
  height: 60rpx;
  text-align: center;
}
.help .help_item .title .title_2 image {
  width: 40rpx;
  height: 40rpx;
  margin: 10rpx auto;
}
.help .help_item .detail {
  margin: 10rpx auto;
  font-size: 25rpx;
  line-height: 40rpx;
  text-indent: 2em;
}
      

　　JS

Page({
  data: {

   
      showIndex: 0
  
  },
  // 展開折疊選擇  
  panel: function (e) {
    if (e.currentTarget.dataset.index != this.data.showIndex) {
      this.setData({
        showIndex: e.currentTarget.dataset.index
      })
    } else {
      this.setData({
        showIndex: 0
      })
    }
  }
})