類似這樣的展開效果
頁面打開會(huì)開始渲染列表嫉入，如果點(diǎn)擊其中一個(gè)列表 list 需要展開其說明或者備注，那我們就需要用到這樣的方法（不唯一璧尸，也可能有更簡(jiǎn)單的方法）
Step1. 我們需要在渲染的列表上進(jìn)行數(shù)據(jù)綁定咒林，要讓點(diǎn)擊事件觸發(fā)的時(shí)候帶列表索引過去
<div class="integrate-info">
<div class="integrate-site" @click="start(index)">
<span class="recharge recharge-long">
<span class="recharge-way">這是標(biāo)題這是標(biāo)題</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. 點(diǎn)擊之后會(huì)觸發(fā)start方法并且?guī)Я藢?shí)參index過來，接下來我們就要利用這個(gè)index完成一些交互
start (index) {
var hide = document.getElementsByClassName('hide') // 找到這個(gè)hide的屬性爷光，同級(jí)class還有個(gè).show
for (var i = 0; i <= 10; i++) { // for循環(huán)進(jìn)行檢查列表
if (i 垫竞！=== index) {
hide[i].classList.remove('show') // 如果不是點(diǎn)擊的列表項(xiàng)，則清除附加的class（show）
}
if (i === index) {
hide[i].classList.toggle('show') // 如果是點(diǎn)擊的列表項(xiàng)蛀序，則toggle
}
}
}
