多个li标签，点击展开当前li下隐藏的li内容，再次点击隐藏，vue如何实现啊？

Question

如图点第一个li 所有li的p都会显示。
点第二个li其他li隐藏内容也展开了，怎么样才能点哪个li，哪个li隐藏的li的内容显示呢？

代码在这里：

<style>
  .box_li{
    padding: 0 40px;
    font-size: 20px;
    background-color: #bfbfbf;
    border: 1px solid #fff;
  }
  .after_p{
    background: bisque;
  }
</style>
<template>
  <div class="box">
    <ul v-for="item in items">
      <li class="box_li" @click="toggle()">
          <p>
            {{item.text}}
          </p>
      </li>
      <li>
        <p class="after_p" v-show="isActive" >
          {{item.desc}}
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        isActive: false,
        items: [{
          text: 'one',
          desc: 'one content',
        }, {
          text: 'two',
          desc: 'two conten'
        }, {
          text: 'three',
          desc: 'three conten'
        }]
      }
    },
    methods: {
      toggle() {
        this.isActive = !this.isActive;
      }
    },
  }
</script>

Answer 1

看你的需要，当一个li展开的时候，其它li的状态要不要变？
如果你只允许一个li展开，其它要收起。
那你可以把把 isActive 改成 activeIndex，当点击li的时候把activeIndex修改为当前的索引
li中内容: v-show="activeIndex==index"

如果可以同时展开多个，初始化的时候，你就要给每个item加上一个标识，每次点击的时候修改这个标识就可以了。

Answer 2

用v-if 或者 v-show绑定一个变量 然后通过给变量赋值 （true or false）来实现控制显示隐藏

Answer 3

`data(){

        return{
            data: [],
            activeIndex: ''
        }
    }
    methods: {
        setIndex(index){
            this.activeIndex = index
        }
    }
    <div v-for="(item, index) in data">
        <li @click="setIndex(index)">
            <p v-show="index == activeIndex">{{item}}</p>
        </li>
    </div>`这就是手风琴的实现原理