微信小程序實現折疊面板

wxml:

<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>

wxss:

.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:

  /**
   * 頁面的初始數據
   */
  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
      })
    }
  }

 最終效果：