微信小程序 - 折叠展开效果

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>

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

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
    })
  },

})

效果图，手风琴效果：