结果如下：


Html：




我的朋友

狼
丽莎
…



业务的朋友

肖明
红
…



黑名单

哈哈
…





Css：


UL，H2填充：0；边距：0；}
李{列表样式：无；}
{ #列表
宽度：240px；
边境：1px solid # CCC；
保证金：0汽车；
}
# list.lis { }
#列表H2 {
身高：30px；
行高：30px；
文本缩进：20px； / * * / 20px文本缩进
背景：URL（IMG / ico1 .gif）没有重复5px中心粉红色； / * * /前面的小箭头
光标：指针；
}
添加# list.active { / *在类名点击。
背景：URL（IMG / ico2 .gif）没有重复5px中心# ff9；
}
#列表ul {显示：无；}
#列表UL Li {
行高：24px；
底部边框：2px固体# FC4；
文本缩进：24px； / * * / 24px文本缩进
}


Js：


在window.onload =函数（）{
var list = document.getelementbyid（'list）；
VaR AH2 = list.getelementsbytagname（'h2）；
VaR ULS = list.getelementsbytagname（'ul）；
要在UL上和下面，所以我们应该使用索引值来添加H2索引值。
对于（var i = 0；i < ah2.length；i++）{
AH2 {我}。指数=我； / /添加索引，H2，点击添加索引值
AH2 {我}。onclick =函数（）{
如果（this.classname = =）{ / /确定H2标签有一种点击，
/ / this.index H2指的是指数，身体指数this.index H2，H2
ULS { }。指数style.display =阻止；
this.classname =活动； / /将类添加到当前点击的H2，更改箭头方向
其他{ }
ULS { }。指数style.display =不关；
this.classname =；
}
}
}
}


下一部分是介绍给你：js QQ好友列表扩展，收缩功能（第二）

以上是JS仿QQ好友列表的引入和收缩功能，这是萧边介绍的。希望能对你有所帮助。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。