在上篇的基礎上繼續完善，點選一個li元素，其他li元素上的類名清除掉。
js：

<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進行匹配，所以我們要用索引值，給h2身上新增索引值
        for(var i=0;i<ah2.length;i++){              
            ah2[i].index = i;//給h2新增索引值，點選誰就給誰新增索引值
            ah2[i].onclick = function(){
                if(this.className == ''){//判斷所點選的h2標籤是否有類，
                    //this.index指h2身上的索引數，this指h2，h2的索引值為this.index
 

                    uls[this.index].style.display = 'block'; 
                    this.className = 'active';//給當前點選的h2新增類，更改箭頭方向
                }else{
                    uls[this.index].style.display = 'none';
                    this.className = '';
                }
            }
        }

        // 找到list裡的所有ul,共有三個ul，所以用到for迴圈
 

        for(var i=0;i<uls.length;i++){//找到每一組ul
            lis = uls[i].getElementsByTagName('li');//找到uls中的所有li元素,存入到lis中，為什麼要存一下呢？因為找到的li元素是一組元素的集合，要給每一個元素新增點選事件，存起來之後要再來一次for迴圈，for套for中間沒有函式包著所以得換一個變數
            for(var j=0;j<lis.length;j++){//找到每組ul中的所有li
                arrli.push(lis[j]); //把每個li放到陣列中，因為是要操作一組li中的每個，所以我們把它拎出來放在一起方便操作
            }
        }
        // 找到每個li之後進行點選事件操作
        for(var i=0;i<arrli.length;i++){
            arrli[i].onclick = function(){
                // 清除所有類名，只給當前點選的新增
                // 只保留一個li元素新增類名
                // 為什麼用的是i呢？因為for套for它們中間有一層函式隔開（有函式包含的情況下作用域發生了改變），所以可以使用同樣的i名稱
                for(var i=0;i<arrli.length;i++){
                    arrli[i].className = '';//去掉點選所有新增的類
                }
                this.className = 'hover';//給當前點選的li元素新增類名
            }
        }
    }
</script>

注意：

怎麼區分for迴圈中有的用 i 有的用 j？

答：①如果是一個for迴圈，那麼用 i 或者 j 哪個都行，一般是用 i .
②如果是兩個for巢狀，那麼看兩個for中間有沒有函式隔開：1.有函式隔開，那麼這兩個for迴圈中的變數都可以用 i 。2.沒有函式隔開，那麼這兩個for迴圈中的變數不能使用相同的 i 來命名，一個 i ，一個 j .

例一：
下面是兩個巢狀的for迴圈中沒有函式隔開，所以一個是 i ，一個是 j .

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

例二：
也是兩個巢狀的for迴圈中，有一個函式隔開，那麼就可以使用同一個 i 來命名。

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';//給當前點選的li元素新增類名
    }
}