classList实现列表展开效果

类似这样的展开效果

页面打开会开始渲染列表，如果点击其中一个列表 list 需要展开其说明或者备注，那我们就需要用到这样的方法（不唯一，也可能有更简单的方法）

Step1. 我们需要在渲染的列表上进行数据绑定，要让点击事件触发的时候带列表索引过去

<div class="integrate-info">
  <div class="integrate-site" @click="start(index)">
    <span class="recharge recharge-long">
      <span class="recharge-way">这是标题这是标题</span>
      <span class="recharge-data">2017.26.12 00:20</span>
    </span>
    <span class="use-integrate">+100</span>
  </div>
  <div class="hide show">
    <span>这是备注这是备注</span>
  </div>
</div>

image.png

Step2. 点击之后会触发start方法并且带了实参index过来，接下来我们就要利用这个index完成一些交互

start (index) {
  var hide = document.getElementsByClassName('hide') // 找到这个hide的属性，同级class还有个.show
  for (var i = 0; i <= 10; i++) { // for循环进行检查列表
    if (i ！=== index) {
      hide[i].classList.remove('show')  // 如果不是点击的列表项，则清除附加的class（show）
    }
    if (i === index) {
      hide[i].classList.toggle('show')  // 如果是点击的列表项，则toggle
    }
  }
}