JS仿QQ好友列表展开,收缩功能(第一篇) - 行业资讯 - 肥雀云

效果图如下所示:

<强> html:

　　　　　　& lt; ul id=傲斜怼北? 　　& lt;李类=" lis”比; 　　& lt; h3>我的好友& lt;/h3> 　　& lt; ul> 　　& lt; li>张三& lt;/li> 　　& lt; li>李四& lt;/li> 　　… 　　& lt;/ul> 　　& lt;/li> 　　& lt;李类=" lis”比; 　　& lt; h3>企业好友& lt;/h3> 　　& lt; ul> 　　& lt; li>小明& lt;/li> 　　& lt; li>小红& lt;/li> 　　… 　　& lt;/ul> 　　& lt;/li> 　　& lt;李类=" lis”比; 　　& lt; h3>黑名单& lt;/h3> 　　& lt; ul> 　　& lt; li>哈哈& lt;/li> 　　… 　　& lt;/ul> 　　& lt;/li> 　　& lt;/ul> 　　　　css:

<强>

　　　　　　ul、h3{填充:0;保证金:0;} 　　李{list-style:没有;} 　　#{列表　　宽度:240 px; 　　边界:1 px固体# ccc; 　　保证金:0汽车; 　　} 　　#列出.lis {} 　　# h3{列表　　高度:30 px; 　　行高:30 px; 　　indent: 20 px;/*文字缩进20 px */背景:url (img/ico1.gif)没有重演5 px中心粉红色;/*前面小箭头*/光标:指针; 　　} 　　#列表.active{/*点击时添加的类名*/背景:url (img/ico2.gif)没有重演5 px中心# ff9; 　　} 　　# ul列表{显示:没有;} 　　# ul列表li) { 　　行高:24 px; 　　边界底部:2 px固体# fc4; 　　indent: 24 px;/*文字缩进24 px */} 　　　　

<强> js:

　　　　　　窗口。onload=function () { 　　var=. getelementbyid列表(列表); 　　var ah3=list.getElementsByTagName (h3); 　　var极限状态=list.getElementsByTagName (“ul”);//h3要和下面的ul进行匹配,所以我们要用索引值,给h3身上添加索引值　　我(var=0; i< ah3.length;我+ +){ 　　ah3[我]。指数=我;//给h3添加索引值,点击谁就给谁添加索引值　　ah3[我]。onclick=function () { 　　如果这一点。className==?{//判断所点击的h3标签是否有类,//this.index指h3身上的索引数,这指h3, h3的索引值为this.index 　　摘要this.index .style。显示=翱椤? 　　这一点。className=盎钤尽?//给当前点击的h3添加类,更改箭头方向　　其他}{ 　　摘要this.index .style。显示='没有'; 　　这一点。className="; 　　} 　　} 　　} 　　} 　　　　

下篇给大家介绍:JS仿QQ好友列表展开,收缩功能(第二篇)

以上所述是小编给大家介绍的JS仿QQ好友列表展开,收缩功能(第一篇),希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!