JS仿QQ好友列表展開、收縮功能(第一篇)

發布時間：2020-10-17 14:20:03

來源：腳本之家

閱讀：96

作者：erdouzhang

效果圖如下所示：

html:

• 我的好友

  • 張三
  • 李四

  ...

企業好友

• 小明
• 小紅

...

黑名單

• 哈哈

...

css：

ul,h3 {padding: 0;margin: 0;}

li {list-style: none;}

#list {

width: 240px;

border: 1px solid #ccc;

margin: 0 auto;

}

#list .lis { }

#list h3 {

height: 30px;

line-height: 30px;

text-indent: 20px;/*文字縮進20px*/

background: url(img/ico1.gif) no-repeat 5px center pink;/*前面小箭頭*/

cursor: pointer;

}

#list .active { /* 點擊時添加的類名 */

background: url(img/ico2.gif) no-repeat 5px center #ff9;

}

#list ul {display: none;}

#list ul li {

line-height: 24px;

border-bottom: 2px solid #fc4;

text-indent: 24px;/*文字縮進24px*/

}

js：

window.onload = function(){

var list = document.getElementById('list');

var ah3 = list.getElementsByTagName('h3');

var uls = list.getElementsByTagName('ul');

// h3要和下面的ul進行匹配，所以我們要用索引值，給h3身上添加索引值

for(var i=0;i

ah3[i].index = i;//給h3添加索引值，點擊誰就給誰添加索引值

ah3[i].onclick = function(){

if(this.className == ''){//判斷所點擊的h3標簽是否有類，

//this.index指h3身上的索引數，this指h3，h3的索引值為this.index

uls[this.index].style.display = 'block';

this.className = 'active';//給當前點擊的h3添加類，更改箭頭方向

}else{

uls[this.index].style.display = 'none';

this.className = '';

}

}

}

}

下篇給大家介紹：JS仿QQ好友列表展開、收縮功能(第二篇)

以上所述是小編給大家介紹的JS仿QQ好友列表展開、收縮功能(第一篇)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！

總結

以上是生活随笔為你收集整理的html仿qq最小化怎么实现,JS仿QQ好友列表展开、收缩功能(第一篇)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。