结果如下:
Html:
我的朋友
狼
丽莎
…
业务的朋友
肖明
红
…
黑名单
哈哈
…
Css:
UL,H2填充:0;边距:0;}
李{列表样式:无;}
{ #列表
宽度:240px;
边境:1px solid # CCC;
保证金:0汽车;
}
# list.lis { }
#列表H2 {
身高:30px;
行高:30px;
文本缩进:20px; / * * / 20px文本缩进
背景:URL(IMG / ico1 .webp)没有重复5px中心粉红色; / * * /前面的小
箭头 光标:指针;
}
添加# list.active { / *在类名点击。
背景:URL(IMG / ico2 .webp)没有重复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好友列表的引入和收缩功能,这是萧边介绍的。希望能对你有所帮助。如果你有任何问题,请给我留言,萧边会及时给您回复。谢谢您
支持网站。