側邊欄手風琴效果

html

<ul>
  <li :class="{active:item.show}" @click="changeli(index, item)" v-for="(item,index) in headerData" :key='index'>
    {{item.name}}{{item.show}}
    <ul v-show="item.show">
      <li v-for="(a,index) in item.list" @click.stop="doThis(index)" :key='index'>{{a}}        
      </li>
    </ul>
  </li>
</ul>

js

changeli (index, item) {
  // 循環全部列表，去掉展開的item
  this.headerData.forEach(i => {
    if (i.show !== this.headerData[index].show) {
      i.show = false
    }
  })
  item.show = !item.show
},
doThis (index) {
  alert(index)
}