微信小程序实现折叠面板

wxml

<view class='help'>
 <view class='help_item' wx:for="{{questList}}" wx:key="index">
   <view class='title' data-index='{{index}}' catchtap='panel'>
     <view class='title_1'>{{item.questions}}</view>
     <view class='title_2'><image src="../../images/{{item.t ? 'up1':'down1'}}.png" mode="widthFix"></image></view>
   </view>
   <view class='detail' style="height:{{ item.t?'':0}}">{{item.answers}}</view>
 </view>
</view>

wxss

.help {
  width: 700rpx;
  margin: 0 auto;
}
.help .help_item {
  margin: 10rpx auto;
}
.help .help_item .title {
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #E6E6E6;
  display: flex;
}
.help .help_item .title .title_1 {
  width: 630rpx;
  height: 80rpx;
  padding-left: 20rpx;
}
.help .help_item .title .title_2 {
  width: 50rpx;
  height: 60rpx;
  text-align: center;
}
.help .help_item .title .title_2 image {
  margin: 10rpx auto;
  width: 25rpx;
}
.help .help_item .detail {
  margin: 10rpx auto;
  font-size: 25rpx;
  line-height: 40rpx;
  font-size: 30rpx;
  height: 200rpx;
  transition: height 1s;
  -moz-transition: height 1s;
  /* Firefox 4 */
  -webkit-transition: height 1s;
  /* Safari and Chrome */
  -o-transition: height 1s;
  /* Opera */
  overflow: hidden;
  font-size: 28rpx;
  color: #1F1F21;
  padding-left: 20rpx;
  box-sizing: border-box;
}

js

/**
   * 页面的初始数据
   */
  data: {
    showIndex: 10,
    questList: [{
      questions: 'Q：这是问题',
      answers: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",
      t:false,
    }, {
      questions: 'Q：这是问题',
      answers: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",
      t:false,
    }, {
      questions: 'Q：这是问题',
      answers: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",
      t:false,
    }],
  },
方法：
// 折叠面板
  panel: function (e) {
    this.data.questList[e.currentTarget.dataset.index].t = !this.data.questList[e.currentTarget.dataset.index].t
    this.setData({
      questList:this.data.questList
    })
    if (e.currentTarget.dataset.index != this.data.showIndex) {
      this.setData({
        showIndex: e.currentTarget.dataset.index,
      })
    } 
    else {
      this.setData({
        showIndex: 10
      })
    }
  },

本文纯属记录
转自：https://zhuanlan.zhihu.com/p/414423045