父子多重展开折叠联动

用对象控制父与子的展开折叠

const isShowCard = {
  card1: {
    value: true, // 父
    subCard1: true, // 子1
    subCard2: true // 子2
  },
  card2: {
    value: true, // 父
    subCard1: true, // 子1
    subCard2: false, // 子1
  },
  card3: {
    value: true,
  }
},

// 调用传参即为对应的card与subCard
function changeShow(card, subCard) {
  if (subCard === 'value') {
    let haveOpen = false
    for (const subKey in this.isShowCard[card]) {
      if (subKey !== 'value' && this.isShowCard[card][subKey]) {
        haveOpen = true
        break
      }
    }
    Object.keys(this.isShowCard[card]).forEach(subKey => {
      this.isShowCard[card][subKey] = !haveOpen
    })
  } else {
    this.isShowCard[card][subCard] = !this.isShowCard[card][subCard]
    let allFalse = true
    for (const subKey in this.isShowCard[card]) {
      if (subKey !== 'value' && this.isShowCard[card][subKey]) {
        allFalse = false
        break
      }
    }
    this.isShowCard[card]['value'] = !allFalse
  }
}
posted @ 2022-09-05 21:09  jiazq  阅读(38)  评论(0)    收藏  举报