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