jsQQ好友列表扩展与收缩功能(一)

jsQQ好友列表扩展与收缩功能(一)
结果如下:
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好友列表的引入和收缩功能,这是萧边介绍的。希望能对你有所帮助。如果你有任何问题,请给我留言,萧边会及时给您回复。谢谢您支持网站
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部