用Vue JS实现Accordian效果 - HelloWorld开发者社区

1 综述

用Bootstrap的CSS部分实现CSS效果，VueJS实现Accordian效果。利用Vue JS的v-show或v-if指令，显示或隐藏panel-body

2 过程

构建相应的Component
利用Bootstrap写相应的template
注册Component，完成相关的数据、属性、方法

2.1 构建相应的Component

<div id="app">
 <panel></panel>
</div>

2.2 利用Bootstrap写相应的template

<template id="accordian-template">
 <div class="panel panel-default" >
   <div class="panel-heading">
     <h4 class="panel-title"><a href="">{{body.title}}</a></h4>
   </div>
   <div class="panel-body">
     <p>{{body.content}}</p>
   </div>
 </div>
</template>

2.3 注册Component，完成相关的数据、属性、方法

为了让数组变为对象，因此我们要给panel设置item属性，并赋值为数组panels，同时在注册compnent是也要声明属性。
```
<panel :item="panels"></panel>

Vue.component('panel',{
    template:'#accordian-template'，
    props:['item']
  })
```

实例化Vue，给数组panels赋值，由于v-show指令需要数值变化，不能给相应的值一个全局数据，所以在每一个对象中应该设置show这个数据。

   new Vue({
        el:'#app',
        data:{
          panels:[
             {title:'Section 1',content:'This is section 1',show:false},
             {title:'Section 2',content:'This is section 2',show:false},
             {title:'Section 3',content:'This is section 3',show:false}
          ]
      }
   });

循环panel,每个.panel-body显示与否由show取值决定，当show=true时就显示.panel-body，否则隐藏。点击.panel-title时改变show的值以此来影响.panel-body的现实与隐藏。


  <template id="accordian-template">
<div class="panel panel-default" v-for="body in item">
  <div class="panel-heading" >
    <h4><a href="" @click.prevent="body.show = !body.show">{{body.title}}</a></h4>
  </div>
  <div class="panel-body" v-show="body.show" transition="toggle">
    <p>{{body.content}}</p>
  </div>
</div>
  </template>

给.panel-body设置动画效果，需要指明transition=x和设置x.enter,x.leave

   <div class="panel-body" v-show="body.show" transition="toggle">
   <p>{{body.content}}</p>
 </div>
 
 .toggle-enter,.toggle-leave{
         height:0;
         opacity:0;
         padding:0 15px;
    }
   .panel-body{
         transition:all 1s;
         overflow:hidden;
   }

3 总结

将数组转换为对象并取值，需要给component显示声明属性
每个地方的值需要由body.show获得
component的过度效果，需要定义transition名，并设置相应的-enter,-leave效果

4 用jQuery实现

法一：点击.panel-title时获取相应的[data-target],给id=[data-target]添加或移除.in。这是Bootstrap中的实现方法。其方法有三个class..collapse隐藏元素，.collapse.in显示元素，.collapsing隐藏和显示之间的过渡效果。
法二：直接给id=[data-target]的元素应用animate()函数，并设置height:toggle或直接使用slideToggle()函数。
法三：没有过渡效果。直接给id=[data-target]的元素应用toggle()函数