wxml：

<view class="page">
<!-- 总数 -->
<view class="li" bindtap='changeToggle'>
<view class="left">总数</view>
<view class="right gray" >8</view>
</view>

<!--分类 -->
<view class="li" data-index="0" bindtap='changeToggle'>
<view class="left">类别1</view>
<view class="right">3 <text class="iconfont {{selectedFlag[0]?'icon-shangjiantou':'icon-xiala'}}"> </text>
      </view>
  </view>
  <view hidden="{{!selectedFlag[0]}}">
    <block wx:for="{{list01}}" wx:for-item="item" wx:for-index="index">
      <view class="li bg-gray">
        <view>展开1</view>
      </view>
    </block>
  </view>

  <view class="li" data-index="1" bindtap='changeToggle'>
    <view class="left">类别2</view>
    <view class="right">0
      <text class="iconfont {{selectedFlag[1]?'icon-shangjiantou':'icon-xiala'}}"> </text>
    </view>
  </view>
  <view hidden="{{!selectedFlag[1]}}">
    <block wx:for="{{list02}}" wx:for-item="item" wx:for-index="index">
      <view class="li bg-gray">
        <view>展开2</view>

      </view>
    </block>
  </view>

  <view class="li" data-index="2" bindtap='changeToggle'>
    <view class="left">类别3</view>
    <view class="right red">2
      <text class="iconfont {{selectedFlag[2]?'icon-shangjiantou':'icon-xiala'}}"> </text>
    </view>
  </view>
  <view hidden="{{!selectedFlag[2]}}">
    <block wx:for="{{list03}}" wx:for-item="item" wx:for-index="index">
      <view class="li bg-gray">
        <view>展开3</view>

      </view>
    </block>
  </view>

  <view class="li" data-index="3" bindtap='changeToggle'>
    <view class="left">类别4</view>
    <view class="right red">3
      <text class="iconfont {{selectedFlag[3]?'icon-shangjiantou':'icon-xiala'}}"> </text>
    </view>
  </view>
 <view hidden="{{!selectedFlag[3]}}">
    <block wx:for="{{list04}}" wx:for-item="item" wx:for-index="index">
      <view class="li bg-gray">
        <view>展开4</view>
        <view class="red">展开4右边</view>
      </view>
    </block>
  </view>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67

wxss:

/* 列表详情 */

.li {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  font-size: 34rpx;
  width: 92%;
  padding: 0 4%;
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #f1f1f1;
}
.bg-gray{
    background-color: #ccc!important;
    border-bottom: 1rpx solid  #fff!important;
}

.li .icon-xiala ,.icon-shangjiantou {
  color: #999;
  font-size: 28rpx;
}

.gray {
  color: #8e8e8e;
}

.red {
  color: #fe2e2e;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

js:

Page({
  data: {

    list01: [
      { item_id: 1 }, { item_id: 11 }, { item_id: 11 },
    ],
    list02: [

    ],
    list03: [
      { item_id: 11 }, { item_id: 11 }
    ],
    list04: [
      { item_id: 11 }, { item_id: 11 }, { item_id: 11 }
    ],

  // 展开折叠
    selectedFlag: [false, false, false, false],

  },
    // 展开折叠选择  
  changeToggle:function(e){
    var index = e.currentTarget.dataset.index;
    if (this.data.selectedFlag[index]){
      this.data.selectedFlag[index] = false;
    }else{
      this.data.selectedFlag[index] = true;
    }

    this.setData({
      selectedFlag: this.data.selectedFlag
    })
  },

})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

效果图，手风琴效果：