微信小程序 折叠效果

<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 {
   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 {
   630rpx;
  height: 60rpx;
  padding-left: 20rpx;
}
.help .help_item .title .title_2 {
   50rpx;
  height: 60rpx;
  text-align: center;
}
.help .help_item .title .title_2 image {
   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
      })
    }
  }
})