简单的JS实现口风琴设计

简单的JS实现口风琴设计

一、效果展示：

二、思路

1. 遍历当前层级的数组，对数组对象添加show属性，通过index控制是否展开
2. 通过v-if 或者v-show 来控制展示（我用的是vue）

三、核心代码：

    // 口风琴式展开，即默认只有一个展开
    const handleShowData = (data: any, index: number) => {
      for (let i = 0; i < data.length; i++) {
        if (index === i) {
          data[i].show = !data[i].show
        } else {
          data[i].show = false
        }
      }
    }

注意：data为当前层级展示数据的一个数组，index为当前层级展开的下标