微信小程序中手风琴折叠菜单

效果图

1.wxml

// WXML片段
  <block wx:for="{{list}}" wx:for-item="list" wx:for-index="idx">
          <!-- 订单组list -->
          <view style='margin-bottom:10rpx;' data-index="{{idx}}">
            <view class="li" data-index="{{idx}}" bindtap='changeToggle'>
              <view class="left">
                <view class="xuhao">{{idx+1}}</view>
                <view class="l-time">时间：{{list.date}}</view>
              </view>
              <view class="right">
                <view class="order-num">{{list.hejiordernum}}单</view>
                <view class="order-status" bindtap='startorder' data-id="{{list.id}}" wx:if="{{list.status==0}}">接单</view>
                <view class="order-status" wx:if="{{list.status==1}}">配送中</view>
                <view class="order-status" wx:if="{{list.status==2}}">已完成</view>
              </view>
            </view>
            <view wx:if="{{list.count>0}}" hidden="{{!selectedFlag[idx]}}">
              <view class="b-shadow">
                <block wx:for="{{list.listx}}" wx:for-item="listx" wx:for-index="idxx">
                  <!--批次下面订单明细-->
                  <view class="oddtail">
                    <view class="list-rank">
                      <text class="rank-num">{{idxx+1}}</text>
                      <view class="rcvinfo">
                        <view class="infoCont">
                          <view>收件人:</view>
                          <view class="imp">{{listx.sname}}</view>
                        </view>
                        <view class="infoCont" bindtap='callGk' data-mobile="{{listx.smobile}}">
                          <view>电话:</view>
                          <view class="imp">{{listx.smobile}}</view>
                        </view>
                      </view>
                    </view>
                    <view class="qds">
                      <view class="qdsCont">
                        <view class="qds-flex">
                          <!-- <image src="/static/images/take.png"></image> -->
                          <view class='qds-take'>取</view>
                          <view class="qsInfo">{{listx.goodsname}}</view>
                        </view>
                        <view class="qds-flex">
                          <!-- <image src="/static/images/send.png"></image> -->
                          <view class='qds-send'>送</view>
                          <view class="qsInfo">{{listx.address}}</view>
                        </view>
                      </view>
                      <view bindtap="puttj" wx:if="{{listx.ispeisong==1}}" data-select="{{listx.id}}" data-id="{{listx.id}}" class=" {{listx.ispeisong==catalogSelect && iids !=listx.id ? 'btn btn-danger block finish':'btn btn-danger active'}}">确定</view>
                    </view>
                  </view>
                  <!--@批次下面订单明细-->
                </block>
              </view>
            </view>
          </view>
          <!-- end订单组1 -->
  </block>

2.WXSS

// wxss片段
.li {
  background: -moz-linear-gradient(top, #6ed853 0%, #5eb648 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6ed853), color-stop(100%, #5eb648));
  background: -webkit-linear-gradient(top, #6ed853 0%, #5eb648 100%);
  background: -o-linear-gradient(top, #6ed853 0%, #5eb648 100%);
  background: -ms-linear-gradient(top, #6ed853 0%, #5eb648 100%);
  display: flex;
  justify-content: space-between;
  font-size: 34rpx;
  width: 92%;
  padding: 0 4%;
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #f1f1f1;
}
.left, .right {
  display: flex;
  align-items: center;
}
.xuhao {
  width: 60rpx;
  height: 60rpx;
  border: 1px solid #fff;
  line-height: 60rpx;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-size: 46rpx;
}

.l-time {
  font-size: 28rpx;
  color: #fff;
  margin-left: 25rpx;
}
.order-num {
  color: #fff;
  font-size: 44rpx;
  margin-right: 20rpx;
}

.order-status {
  box-shadow: 1px -1px 5px rgba(34, 25, 25, 0.2) inset;
  color: #5eb648;
  background: #fff;
  border-radius: 6rpx;
  height: 60rpx;
  line-height: 60rpx;
  width: 120rpx;
  text-align: center;
  font-size: 30rpx;
}
.b-shadow {
  box-shadow: 0 0 5px #ddd;
  margin: 0 20rpx;
}
.oddtail {
  background: #fff;
  border-radius: 10rpx;
}

.list-rank {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  padding: 0 20rpx;
  background: rgb(249, 240, 225);
}
.rcvinfo {
  display: flex;
  align-items: center;
  width: 87%;
  justify-content: space-between;
  margin: 0 auto;
}

.rcvinfo .infoCont {
  display: flex;
  padding: 10rpx 0;
  align-items: center;
}
........(等等元素内层样式就不一一列出)

3.js

// js片段
data{
	list:[],
	selectedFlag: [true],//代表第一个菜单是默认展开的
},
//手风琴折叠菜单
  changeToggle: function(e) {
    var index = e.currentTarget.dataset.index;
    console.log(this.data.selectedFlag[index]);
    if (this.data.selectedFlag[index]) {
      this.data.selectedFlag[index] = false;
    } else {
      this.data.selectedFlag[index] = true;
    }
    this.setData({
      selectedFlag: this.data.selectedFlag
    })
  },
  //获取今日订单与全部订单
  todayordergetList: function() {
    var t = this;
    t.setData({
      loading: !0,
      list: []
    }), a.get("order/wentnods/get_todaylist", {
      page: t.data.page,
      ispeisong: t.data.ispeisong
    }, function(a) {
      t.setData({
        list: a.list
      });
      // console.log('shuju====' + JSON.stringify(a)); 
    });
  },
  //@获取今日订单