借鑑部落格：https://www.cnblogs.com/adobe-lin/p/9564549.html

摺疊面板效果圖：

圖1：

==========================================================================================

我在借鑑部落格的程式碼上拿過來直接用，然後根據我的業務改了一些程式碼

1、頁面Testlist.wxml程式碼：

<!--pages/timecard/overwork/Testlist/Testlist.wxml-->
<view class='help'>
  <view class
 
='help_item' wx:for="{{list}}" wx:key="key">
    <view class='title'>
      <view class='title_1'>
        <checkbox-group bindchange="checkboxChange">
          <checkbox value='' >{{item.title}}</checkbox>
        </checkbox-group>
      </view>
      <view class
 
='title_2' data-index='{{item.id}}' catchtap='panel'><text class="iconfont icon-arrow-right"></text></view>
    </view>

    <!-- 摺疊面板內容 -->
    <view class='detail' wx:if="{{showIndex == item.id}}">
      <view class="detail_content">
        <view class
 
="detail_left">開始</view>
        <view class="detail_right">{{item.begin_date}}</view>
      </view>
      <view class="detail_content">
        <view class="detail_left">結束</view>
        <view class="detail_right">2222</view>
      </view>
      <view class="detail_content">
        <view class="detail_left">便籤3</view>
        <view class="detail_right">3333</view>
      </view>
      
    </view>
  </view>
  <!-- <view class='help_item'>
    <view class='title' data-index='2' catchtap='panel'>
      <view class='title_1'>便籤小程式使用免費嗎</view>
      <view class='title_2'><text class="iconfont icon-arrow-right"></text></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'><text class="iconfont icon-arrow-right"></text></view>
    </view>
    <view class='detail' wx:if="{{showIndex == 3}}">便籤小程式是一款免費應用，並承諾永不收費3</view>
  </view> -->
</view>

2、js的程式碼，Testlist.js如下：

 data: {

      list: [
        {
          'id':'1',
          'title':'張三_延時工作申請單2020111',
          'begin_date':'2020-10-28',
          'end_date':'2020-10-28',
          'hours':'22',
          'count':'2',
          'overwork_reason':'工作需求加班的'
        },
        {
          'id':'2',
          'title':'張三_延時工作申請單2020222',
          'begin_date':'2020-10-27',
          'end_date':'2020-10-27',
          'hours':'27',
          'count':'2',
          'overwork_reason':'工作需求加班的的的的的的的的的的的的的的的的的的的的的的'
        }
      ],  
      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
      })
    }
  },

3、css頁面程式碼，Testlist.wxss程式碼如下：

/* pages/timecard/overwork/Testlist/Testlist.wxss */
.help {
  width: 100%;
  margin: 0 auto;
}
.help .help_item {
  margin: 10rpx auto;
}
.help .help_item .title {
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  /* background: #e2e2e2; */
  display: flex;
  border: 1px solid #EFEFF4;
  background-color: #FFFFFF;
}
.help .help_item .title .title_1 {
  font-size: 30rpx;
  width: 630rpx;
  height: 80rpx;
  padding-left: 20rpx;
}
.help .help_item .title .title_2 {
  width: 50rpx;
  height: 80rpx;
  text-align: center;
}

.help .help_item .detail {
  margin: 0rpx auto;
  font-size: 30rpx;
  line-height: 80rpx;
  text-indent: 2em;
  background-color: white;
}
checkbox .wx-checkbox-input {
  width: 40rpx;
  height: 40rpx;
  border:1px solid #E5E5E5;
}
.help .help_item .detail .detail_content{
  border: 1rpx solid #EFEFF4;
  display: flex;
  flex-flow:row;
}
.help .help_item .detail .detail_content view{
  width:50%;
  display:inline-block;
  }
.help .help_item .detail .detail_right{
  text-align:right;
  padding-right:30rpx;
}

。。