效果图如下：

html:

Ul id=' list ' Li class=' lis我的朋友/h2ul lizhangsan/li lisi/Li./ul/li Li等级=' lis商务朋友/h2ul李小明/李立宏/Li./ul/Li Li lass=' lis ' H2黑名单/h2ul lihaha/li。

ul，H2 { padd : 0；margin : 0；} Li { list-style : none；} # list { width: 240pxborder: 1px固体# cccmargin: 0 auto} #列表。lis { } # list h2 { height: 30px线高： 30px；text-indent : 20px；/*文本缩进20px */background : URL(img/ico1 . gif)no-repeat 5px中心粉色；/*前面的小箭头*/cursor:指针；} #列表。单击时添加的活动{/*类名*/background : URL(img/ico2 . gif)no-repeat 5p xcenter # ff9；} # list ul { display: none} #列出ul Li { line-height : 24px；border-bottom: 2px实心# fc4text-indent : 24px；/*文本缩进24px*/}js:

window . onload=function(){ var list=document . getelementbyid(' list ')；var ah2=list . getelementsbytagname(' H2 ')；var uls=list . getelementsbytagname(' ul ')；//h2应该和下面的ul匹配，所以我们应该把(var i=0)的索引值加到有索引值的h2上；iah2.lengthi ){ ah2[i]。索引=I；//给h2加上索引值，再加上索引值ah2 [I]。onclick=function () {if (this。class name=' '){//判断被点击的h2标签是否有类。//this.index指h2上的索引号，这个指h2，h2的索引值就是这个。index uls[这个。this.className=' active//向当前单击的h2添加一个类，并更改箭头方向} else {uls [this。索引]。风格。显示='无'；this.className=}}}}下一章给大家介绍：JS模仿QQ好友列表的伸缩功能(第二章)

以上是边肖介绍的JS模仿QQ好友列表的伸缩功能(第一个)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！