看似簡單的小功能，坑卻不少...主要為了練習一下自己的js實踐能力，真是不寫不知道，這么小小的一個東西我遇到的坑實在是太多了，放上來僅供參考學習..優化什么的都不好....
效果如圖所示：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ列表</title> <style> #list{ width:240px; background-color: #5fb878; } ul, li, h2{ margin:0; padding:0; list-style: none; text-indent:20px; } #list ul{ display:none; } .item li{ border-bottom:1px solid #333; text-indent: 24px; padding:4px; } h2{ font-size: 16px; background:url(images/ico1.gif) no-repeat 5px center #FF9; color:#000; margin-bottom: 1px; padding:3px; } h2.active { background:url(images/ico2.gif) no-repeat 5px center #FF9; color:#000; } .item .current{background-color: #01AAED} </style> </head> <body> <ul id="list"> <li> <h2>小學弟們</h2> <ul class="item"> <li>陳思遠</li> <li>胡嘉怡</li> <li>黃子恆</li> <li>劉丹</li> <li>南極翁</li> <li>馬鵬飛</li> <li>麻怡若</li> </ul> </li> <li> <h2>我的好友</h2> <ul class="item"> <li>程曦</li> <li>付柳元</li> <li>黃環</li> <li>劉巧麗</li> <li>余萌</li> <li>沈潤</li> <li>徐婷</li> </ul> </li> <li> <h2>大學同學</h2> <ul class="item"> <li>蔡中勇</li> <li>丁玉成</li> <li>陳欣欣</li> <li>楊帥</li> <li>杜同舟</li> <li>李丹丹</li> <li>李濟雨</li> </ul> </li> <li> <h2>高中同學</h2> <ul class="item"> <li>方祥</li> <li>胡曉歡</li> <li>李連松</li> <li>劉一澤</li> <li>羅勇</li> <li>毛蒙</li> <li>衛齊</li> </ul> </li> </ul> </body> <script> window.onload = function(){ var oul = document.getElementById('list'); var oH2 = oul.getElementsByTagName('h2'); var aul = oul.getElementsByTagName('ul'); var aulList = []; for(var i=0, h2Len = oH2.length;i<h2Len;i++){ aulList.push(aul[i]); //給每個h2加上點擊事件 //並給每個h2加上自定義屬性index---不加是沒有index的 oH2[i].index = i; oH2[i].onclick = function(){ var that = this.index; //循環所有的ul,只展開一個 for(var h=0;h<aulList.length;h++){ if(h!=that){ //隱藏ul索引與當前h2索引不匹配的ul列表 aulList[h].style.display='none'; oH2[h].className =''; }else{ //如果當前的ul是關閉的，則展開，否則關閉 if(this.className ==''){ aul[that].style.display = 'block'; oH2[that].className ='active'; }else{ aul[that].style.display = 'none'; oH2[that].className =''; } } } } } //為每個li加上點擊事件 var liArr = []; for(var j=0 ,aulLen = aul.length;j< aulLen;j++){ //循環UL 收集所有UL下的li放到數組liArr里,並未所有的li加上點擊事件 var ali = aul[j].getElementsByTagName('li'); for(var k=0 ;k<ali.length;k++){ liArr.push(ali[k]); ali[k].onclick = function(){ for(var m=0 ;m<liArr.length;m++){ if(liArr[m]!=this){ liArr[m].className=''; } } if(this.className==''){ this.className = 'current'; }else{ this.className = ' '; } } } } // alert(liArr.length); } </script> </html>