<script>
 window.onload = function(){ 
 var list = document.getElementById('list'); 
 var ah2 = list.getElementsByTagName('h2'); 
 var uls = list.getElementsByTagName('ul');
 var lis = null;//用于下面的存儲(chǔ)
 var arrli = [];//
 // h2要和下面的ul進(jìn)行匹配，所以我們要用索引值，給h2身上添加索引值
 for(var i=0;i<ah2.length;i++){ 
 ah2[i].index = i;//給h2添加索引值，點(diǎn)擊誰就給誰添加索引值
 ah2[i].onclick = function(){
 if(this.className == ''){//判斷所點(diǎn)擊的h2標(biāo)簽是否有類，
  //this.index指h2身上的索引數(shù)，this指h2，h2的索引值為this.index
  uls[this.index].style.display = 'block'; 
  this.className = 'active';//給當(dāng)前點(diǎn)擊的h2添加類，更改箭頭方向
 }else{
  uls[this.index].style.display = 'none';
  this.className = '';
 }
 }
 }
 // 找到list里的所有ul,共有三個(gè)ul，所以用到for循環(huán)
 for(var i=0;i<uls.length;i++){//找到每一組ul
 lis = uls[i].getElementsByTagName('li');//找到uls中的所有l(wèi)i元素,存入到lis中，為什么要存一下呢？因?yàn)檎业降膌i元素是一組元素的集合，要給每一個(gè)元素添加點(diǎn)擊事件，存起來之后要再來一次for循環(huán)，for套for中間沒有函數(shù)包著所以得換一個(gè)變量
 for(var j=0;j<lis.length;j++){//找到每組ul中的所有l(wèi)i
 arrli.push(lis[j]); //把每個(gè)li放到數(shù)組中，因?yàn)槭且僮饕唤Mli中的每個(gè)，所以我們把它拎出來放在一起方便操作
 }
 }
 // 找到每個(gè)li之后進(jìn)行點(diǎn)擊事件操作
 for(var i=0;i<arrli.length;i++){
 arrli[i].onclick = function(){
 // 清除所有類名，只給當(dāng)前點(diǎn)擊的添加
 // 只保留一個(gè)li元素添加類名
 // 為什么用的是i呢？因?yàn)閒or套for它們中間有一層函數(shù)隔開（有函數(shù)包含的情況下作用域發(fā)生了改變），所以可以使用同樣的i名稱
 for(var i=0;i<arrli.length;i++){
  arrli[i].className = '';//去掉點(diǎn)擊所有添加的類
 }
 this.className = 'hover';//給當(dāng)前點(diǎn)擊的li元素添加類名
 }
 }
 }
</script>

for(var i=0;i<uls.length;i++){//找到每一組ul
 lis = uls[i].getElementsByTagName('li');
 for(var j=0;j<lis.length;j++){//找到每組ul中的所有l(wèi)i
 arrli.push(lis[j]); 
 }
}

for(var i=0;i<arrli.length;i++){
 arrli[i].onclick = function(){ 
 for(var i=0;i<arrli.length;i++){
 arrli[i].className = '';//去掉點(diǎn)擊所有添加的類
 }
 this.className = 'hover';//給當(dāng)前點(diǎn)擊的li元素添加類名
 }
}