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，完成相干的数据、属性、要领

1. 为了让数组变成对象，因而我们要给panel设置item属性，并赋值为数组panels，同时在注册compnent是也要声明属性。

   <panel :item="panels"></panel>
   
   Vue.component('panel',{
       template:'#accordian-template'，
       props:['item']
     })
   

2. 实例化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}
             ]
         }
      });
      

3. 轮回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>
     

4. 给.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 总结

1. 将数组转换为对象并取值，须要给component显现声明属性

2. 每一个处所的值须要由body.show取得

3. 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()函数