小程序多层数组模块，每个模块底部可点击展示隐藏的详细块，现在只有一个数组可以其他数组点不了怎么办？

Question

.listings {
  overflow: hidden;
}

.listings-float {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 64rpx;
  font-size: 24rpx;
  color: #212121;
  text-align: center;
  background: #fff;
}

.listings-float text {
  color: #aaa;
}

.listings-float navigator {
  margin-left: 10rpx;
  color: #FF6B62;
}
.listings-float navigator image{
  width: 8rpx;
  height: 16rpx;
}

.listings-title {
  width: 100%;
  height: 60rpx;
  font-size: 24rpx;
  color: #aaa;
  line-height: 60rpx;
  text-align: center;
}

.listings-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 12rpx;
  box-sizing: border-box;
}

.listings-box:after {
  content: '';
  width: 236rpx;
}

.box-list {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 236rpx;
  height: 120rpx;
  margin-bottom: 10rpx;
  padding: 12rpx;
  background: #FF6B62;
  border-radius: 10rpx;
  box-sizing: border-box;
}

.box-null {
  background: #FEBC59;
}

.box-null-eye {
  position: absolute;
  right: 10rpx;
  bottom: 10rpx;
  width: 42rpx;
  height: 42rpx;
}

.room-no {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-no text {
  font-size: 24rpx;
  color: #fff;
  font-weight: bold;
}

.room-no view {
  width: 48rpx;
  height: 26rpx;
  font-size: 18rpx;
  color: #FF6B62;
  text-align: center;
  line-height: 26rpx;
  border-radius: 6rpx;
  background: rgba(255, 255, 255, .8);
}

.tenant {
  margin-bottom: 6rpx;
  font-size: 20rpx;
  color: #fff;
}

.status {
  display: flex;
}

.status view {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  font-size: 20rpx;
  color: #fff;
  font-weight: bolder;
  border-radius: 6rpx;
}

.status view image {
  width: 22rpx;
  height: 22rpx;
}

.triangle {
  display: none;
  position: absolute;
  bottom: -14rpx;
  left: 50%;
  width: 26rpx;
  height: 12rpx;
  margin-left: -13rpx;
}

.triangle image {
  float: left;
  width: 26rpx;
  height: 12rpx;
}

.qian {
  background: #FFA724;
}

.lu {
  background: #7C67FF;
}

.yi {
  background: #DEE145;
}

.ding {
  background: #39D236;
}

.kuai {
  background: #41A4FF;
}

.shui {
  background: #D23636;
}

.kong {
  background: #CE5AC9;
}

.sheng {
  background: #FF6B62;
}

.shou {
  background: #31B79F;
}

.listing-details {
  width: 100%;
  padding: 5rpx 0 10rpx;
  box-sizing: border-box;
}

.lideta-box {
  display: flex;
  flex-direction: column;
  padding: 15rpx 12rpx;
  background: #FFE7D2;
  border-radius: 10rpx;
  box-sizing: border-box;
}

.lideta-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.lideta-price {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #212121;
}

.lideta-price view {
  margin-right: 10rpx;
  font-weight: bold;
}

.lideta-price text {
  margin-left: 10rpx;
  color: #FF6B62;
}

.lideta-name {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #714D2E;
}

.lideta-name image {
  width: 22rpx;
  height: 22rpx;
  margin-right: 10rpx;
}

.lideta-box .status {
  margin-bottom: 10rpx;
}

.status-text {
  width: auto !important;
  font-size: 22rpx !important;
  color: #714D2E !important;
}

.status-text text {
  color: #FF6B62;
}

.lideta-button {
  display: flex;
  justify-content: flex-end;
}

.lideta-button view {
  width: 120rpx;
  height: 46rpx;
  margin-left: 20rpx;
  font-size: 24rpx;
  color: #FFA927;
  text-align: center;
  line-height: 42rpx;
  border: 1px solid #FFA927;
  border-radius: 10rpx;
  box-sizing: border-box;
}

.lideta-button view.red-btn {
  color: #fff;
  border: 0;
  line-height: 46rpx;
  background: #FF6B62;
}

<view class="listings" wx:for="{{memberList}}">
  <!-- 小区名称 -->
  <view class="listings-float">
    {{item.community}}<text>(共{{item.num}}间)</text>
  </view>

  <block wx:for="{{item.building}}">
    <!-- 楼栋编号 -->
    <view class="listings-title">{{item.title}}</view>
    <view class="listings-box">
      <!-- 房间 -->
      <block wx:for="{{item.listBox}}" wx:for-index="idx" wx:for-item="item" wx:key="idx">
        <view class="box-list {{item.current == 0 ? 'box-null' : ''}}" bindtap="isOpen" data-index="{{item.id}}">
          <view class="room-no">
            <text>{{item.room}}</text>
          </view>
          <view class="tenant" wx:if="{{item.register}}">{{item.tenant}}</view>
          <view class="tenant" wx:else>{{item.num}}</view>
          <view class="status">
            <view class="qian" wx:if="{{item.qian}}">欠</view>
          </view>
          <view class="triangle">
            <image src="/images/triangle.png" mode="widthFix"></image>
          </view>
        </view>

        <!-- 展开 -->
        <view class="listing-details" hidden="{{item.hidden}}">
          <view class="lideta-box">
            <view class="lideta-top">
              <view class="lideta-price">
                <view>{{item.room}}</view> | <text>{{item.num}}</text>
              </view>
              <view class="lideta-name" wx:if="{{item.register}}">
                <image src="/images/icon-mine.png" mode="widthFix"></image><text>{{item.tenant}}</text>
              </view>
            </view>
            <view class="status" wx:if="{{item.qian}}">
              <view class="qian">欠</view>
              <view class="status-text">账单已逾期<text>{{item.qianNum}}</text>天</view>
            </view>
            <view class="lideta-button">
              <view>房源详情</view>
              <view class="red-btn">查看租约</view>
            </view>
          </view>
        </view>

      </block>

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

Page({

  /**
   * 页面的初始数据
   */
  data: {
    memberList: [{
      community: '海润汇景花园',
      num: '10',
      building: [{
        title: '1栋-1单元',
        listBox: [{
            room: '101',
            num: '￥1200',
            register: true,
            tenant: '吴邪',
            qian: true,
            qianNum: '19',
            hidden: true,
            id: '0',
          },
          {
            room: '102',
            num: '￥100',
            register: false,
            tenant: '',
            qian: false,
            qianNum: '19',
            hidden: true,
            id: '1',
          },
          {
            room: '103',
            num: '￥1200',
            register: true,
            tenant: '王胖子',
            qian: false,
            qianNum: '19',
            hidden: true,
            id: '2',
          },
          {
            room: '104',
            num: '￥1200',
            register: true,
            tenant: '张起灵',
            qian: false,
            qianNum: '19',
            hidden: true,
            id: '3',
          },
          {
            current: 0,
            num: '￥2000',
            room: '105',
            register: false,
            tenant: '',
            qian: false,
            qianNum: '19',
            hidden: true,
            id: '4',
          }
        ],
      }, {
        title: '1栋-2单元',
        listBox: [{
            room: '801-2号房',
            num: '￥2000',
            register: true,
            tenant: '解雨臣',
            qian: true,
            qianNum: '19',
            hidden: true,
            id: '5',
          },
          {
            room: '117',
            num: '￥2000',
            register: true,
            tenant: '吴三省',
            qian: false,
            qianNum: '19',
            hidden: true,
            id: '6',
          }
        ]
      }]

    }],
  },
  isOpen: function (e) {
    var that = this;
    var idx = e.currentTarget.dataset.index;
    console.log(idx);
    var memberList = that.data.memberList[0].building;
    // console.log(memberList);
    for (let i = 0; i < memberList.length; i++) {
      let list = memberList[i].listBox;
      console.log(list);
      for (let i = 0; i < list.length; i++) {
        if (idx == i) {
          list[i].hidden = !list[i].hidden;
        } else {
          list[i].hidden = true;
        }
      }
    }
    this.setData({
      ['memberList[0].building']: memberList
    });

    return true;
  },
  
})

现在点击1栋-1单元的数据，2栋-2单元也会展开，请问怎么处理可以各自分别点击展开折叠？还有样式怎么改可以一直保持上面3块内容呢？

Answer 1

抽成单独的组件，组件内持有自己的展开状态，组件内部控制展开状态。