本文实例为大家分享了js实现QQ列表展开收缩扩展展示的具体代码,供大家参考,具体内容如下
效果图:
代码:
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>无标题文档& lt;/title>
& lt; style>
ul、h3{保证金:0;填充:0;}
李{list-style-type:没有;}
#列表{保证金:0汽车;边界:# 333固体1 px;宽度:250 px;}
#列表h3{背景:url (. ./img/ico1.gif)没有重演5 px 14 px # 0 c6;indent: 20 px;高度:32像素;行高:32 px;}
# ul列表li {indent: 25 px;边界底部:# 333固体1 px;行高:24 px;高度:23 px;}
#列表.active{背景:url (. ./img/ico2.gif)没有重演5 px 14 px # 693;indent: 20 px;高度:30 px;行高:30 px;}
# ul列表{显示:没有;}
.hover{背景:#氟;}
& lt;/style>
& lt; script>
窗口。onload=function () {
var oUl=. getelementbyid(“列表”);
var=oUl.getElementsByTagName也是如此(“ul”);
var aH2=oUl.getElementsByTagName (h3);
阿里var=零;
var arrLi=[];
var=零;
(i=0; i< aH2.length;我+ +){
aH2[我]。指数=我;
aH2[我]。onclick=function () {
如果(this.className==") {
(i=0; i< aH2.length;我+ +){
aH2[我].className=";
倍[我].style.display='没有';
}
this.className=盎钤尽?
[this.index] .style也是如此。显示=翱椤?
其他}{
this.className=";
倍[this.index] .style.display='没有';
}
}
}
(i=0; i< aUl.length;我+ +){
阿里=[我].getElementsByTagName也是如此(“李”);
(j=0; j我的好友& lt;/h3>
& lt; ul>
& lt; li>张三& lt;/li>
& lt; li>张四& lt;/li>
& 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; li>李四二& lt;/li>
& 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;/ul>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
