這篇文章給大家分享的是有關(guān)JS如何模仿QQ好友列表展開、收縮功能的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司是專業(yè)的丁青網(wǎng)站建設(shè)公司，丁青接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行丁青網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

效果圖如下所示：

js：

<script>
 window.onload = function(){ 
 var list = document.getElementById('list'); 
 var ah3 = list.getElementsByTagName('h3'); 
 var uls = list.getElementsByTagName('ul');
 var lis = null;//用于下面的存儲(chǔ)
 var arrli = [];//
 // h3要和下面的ul進(jìn)行匹配，所以我們要用索引值，給h3身上添加索引值
 for(var i=0;i<ah3.length;i++){ 
 ah3[i].index = i;//給h3添加索引值，點(diǎn)擊誰(shuí)就給誰(shuí)添加索引值
 ah3[i].onclick = function(){
 if(this.className == ''){//判斷所點(diǎn)擊的h3標(biāo)簽是否有類，
  //this.index指h3身上的索引數(shù)，this指h3，h3的索引值為this.index
  uls[this.index].style.display = 'block'; 
  this.className = 'active';//給當(dāng)前點(diǎn)擊的h3添加類，更改箭頭方向
 }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>

注意：

怎么區(qū)分for循環(huán)中有的用 i 有的用 j？

答：①如果是一個(gè)for循環(huán)，那么用 i 或者 j 哪個(gè)都行，一般是用 i .
②如果是兩個(gè)for嵌套，那么看兩個(gè)for中間有沒有函數(shù)隔開：1.有函數(shù)隔開，那么這兩個(gè)for循環(huán)中的變量都可以用 i 。2.沒有函數(shù)隔開，那么這兩個(gè)for循環(huán)中的變量不能使用相同的 i 來命名，一個(gè) i ，一個(gè) j .

例一：

下面是兩個(gè)嵌套的for循環(huán)中沒有函數(shù)隔開，所以一個(gè)是 i ，一個(gè)是 j .

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]); 
 }
}

例二：

也是兩個(gè)嵌套的for循環(huán)中，有一個(gè)函數(shù)隔開，那么就可以使用同一個(gè) i 來命名。

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元素添加類名
 }
}

感謝各位的閱讀！關(guān)于“JS如何模仿QQ好友列表展開、收縮功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：JS如何模仿QQ好友列表展開、收縮功能-創(chuàng)新互聯(lián)
新聞來源：http://chinadenli.net/article24/hpoce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站策劃、服務(wù)器托管、移動(dòng)網(wǎng)站建設(shè)、App開發(fā)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)