vue-列表的展开与折叠

功能描述

1、默认第一项展开，其余项全部折叠

2、单独点击某一项，实现展开与折叠功能，

3、注意：只有一项是展开状态

实现

1、详情样式

<div class="transfer-plan" v-for="(item,index) in transferList" :key="index"  @click="foldAndUnfold(index,item)">
            <div class="transfer-plan-head">
              <div class="left"> 36分钟(1.1公里)|步行719米|5元 </div>
              <div class="arrow" :class="{open:showDetail === index}"></div>
            </div>
            <template v-if="showDetail === index">
              <!-- 2 公交地铁 -->
            
              <!-- 3 火车 -->
                          
              <!-- 4 长途巴士 -->
              
            </template>
</div>

2、初始化的数据

data() {
    return {
      showDetail:0,//默认第一项展开
      transferList:[]
    }

如果，默认不展开任何一项， showDetail:-1,即可

3、展开折叠时通过对比showDetail === index 的值来控制是否显示折叠内容，上下箭头的图标样式如此：

<div class="arrow" :class="{open:showDetail === index}"></div>

.arrow{
    width: 0.6rem;
    height: 0.3rem;
    background url(../../../assets/images/icon_up.png) no-repeat
    background-size: 100% 100%
    transition: transform 0.3s
    -webkit-transition: transform 0.3s
    &.open{
      transform : rotate(-180deg)
    }
  }

4、 展开折叠方法foldAndUnfold，用来控制showDetail 的值

foldAndUnfold(index,item){
      // console.log("index====",index)
      if(this.showDetail===index){//两次点击的对象相同，关闭
        this.showDetail = -1
      }else{//点击的对象不同，先关闭前一对象，再打开当前对象
        this.showDetail = index
      }
},