小程序多级数组可折叠展开模块问题

Question

<view class="owner-box" wx:for="{{memberList}}">
        <view class="owner-box-title">
          <view class="owner-periods">第{{item.num}}期</view>
          <view>付款合计：{{item.paymentAll}}元</view>
        </view>
        <block wx:for="{{item.periods}}">
          <view class="cell-box-title" bindtap="isOpen" data-index="{{item.id}}">
            <view>{{item.account}}
            </view>
          </view>
          <view class="cell-box-cont" hidden="{{item.hidden}}">
            <view class="cell">
              <view class="cell-name">账单项目</view>
              <view class="status-gray">{{item.project}}</view>
            </view>
            <view class="cell">
              <view class="cell-name">收/付</view>
              <view class="status-gray">{{item.payment}}</view>
            </view>
          </view>
        </block>
      </view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    memberList: [{
        num: '1',
        paymentAll: '52,844.00',
        periods: [{
          hidden: true,
          id: '0',
          account: '账期三',
          project: '房屋租金',
          payment: '付款'
        }, {
          hidden: true,
          id: '1',
          account: '账期四',
          project: '房屋租金',
          payment: '付款'
        }, {
          hidden: true,
          id: '2',
          account: '账期五',
          project: '房屋租金',
          payment: '付款'
        }]
      },
      {
        num: '2',
        paymentAll: '52,844.00',
        periods: [{
          hidden: true,
          id: '0',
          account: '账期一',
          project: '房屋租金',
          payment: '付款',
        }, {
          hidden: true,
          id: '1',
          account: '账期二',
          project: '房屋租金',
          payment: '付款'
        }, {
          hidden: true,
          id: '2',
          account: '账期三',
          project: '房屋租金',
          payment: '付款'
        }, {
          hidden: true,
          id: '3',
          account: '账期四',
          project: '房屋租金',
          payment: '付款'
        }]
      }
    ]
  },
  // 折叠
  isOpen: function (e) {
    var that = this;
    var idx = e.currentTarget.dataset.index;
    console.log(idx);
    var memberList = that.data.memberList;
    console.log(memberList);
    for (let i = 0; i < memberList.length; i++) {
      var periods = that.data.memberList[i].periods;
      for (let j = 0; j < periods.length; j++) {
        if (idx == j) {
          periods[j].hidden = !periods[j].hidden;
        } else {
          periods[j].hidden = true;
        }
      }
    }
    this.setData({
      memberList: memberList
    });
    return true;
  },
})

这是小程序多个可展开折叠模块，单个没问题，多个点击展开时的会是所有折叠块对应的ID全部展开，怎样可以使得单个模块单独折叠呢？

Answer 1

<view class="owner-box" wx:for="{{memberList}}"  wx:for-index="i">
        <view class="owner-box-title">
          <view class="owner-periods">第{{item.num}}期</view>
          <view>付款合计：{{item.paymentAll}}元</view>
        </view>
        <block wx:for="{{item.periods}}">
          <view class="cell-box-title" bindtap="isOpen" data-index="{{i}}" data-index2="{{index}}">
            <view>{{item.account}}
            </view>
          </view>
          <view class="cell-box-cont" hidden="{{item.hidden}}">
            <view class="cell">
              <view class="cell-name">账单项目</view>
              <view class="status-gray">{{item.project}}</view>
            </view>
            <view class="cell">
              <view class="cell-name">收/付</view>
              <view class="status-gray">{{item.payment}}</view>
            </view>
          </view>
        </block>
</view>

Page({
  data: {
    memberList: [{
        num: '1',
        paymentAll: '52,844.00',
        periods: [{
          hidden: true,
          id: '0',
          account: '账期三',
          project: '房屋租金',
          payment: '付款'
        }, {
          hidden: true,
          id: '1',
          account: '账期四',
          project: '房屋租金',
          payment: '付款'
        }, {
          hidden: true,
          id: '2',
          account: '账期五',
          project: '房屋租金',
          payment: '付款'
        }]
      },
      {
        num: '2',
        paymentAll: '52,844.00',
        periods: [{
          hidden: true,
          id: '0',
          account: '账期一',
          project: '房屋租金',
          payment: '付款',
        }, {
          hidden: true,
          id: '1',
          account: '账期二',
          project: '房屋租金',
          payment: '付款'
        }, {
          hidden: true,
          id: '2',
          account: '账期三',
          project: '房屋租金',
          payment: '付款'
        }, {
          hidden: true,
          id: '3',
          account: '账期四',
          project: '房屋租金',
          payment: '付款'
        }]
      }
    ]
  },
  // 折叠
  isOpen: function (e) {
    let index = e.currentTarget.dataset.index;
    let index2 = e.currentTarget.dataset.index2;
    this.data.memberList[index].periods[index2].hidden = !this.data.memberList[index].periods[index2].hidden
    this.setData({
      memberList: this.data.memberList
    });
  },
})

Answer 2

你的js判断有问题，if (idx == j)这里，你的id并不是唯一的，你两期里的id是有重复的，这样循环的时候不就都改掉了吗，要么把id改成唯一的，要么就是把两层数组的索引作为匹配项