JavaScript实现即时通信软件列表展开收缩扩展功能

本文实例为大家分享了射流研究…实现即时通信软件列表展开收缩扩展展示的具体代码，供大家参考，具体内容如下

效果图：

代码：

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/titlestyleul，h2 { margin:0划水：0;}李{列表式-类型：无；} # list { margin :0 auto order : # 333 solid 1px宽度width :250 px } # list H2 { background : URL(./img/ico1。gif)不重复5px 14px # 0c 6；文本-缩进：20像素；高度：32px线高：32 px} #列出ul Li { text-缩进：25 px边框-底部： # 333实心1px线高：24 px高度：23px} #列表。活动{background: url(./img/ico2。gif)不重复5px 14px # 693文本-缩进：20像素；高度：30 px线高：30 px} # list ul { display:none}。悬停{ background: # CFC}/style脚本窗口。onload=function(){ var OUl=document。getelementbyid(' list ')；var AuL=OUl。GetElementsBytagname(' ul ')；var AH2=OUl。GetElementsBytagname(' H2 ')；var AlI=null var ArrLi=[]；即=null for(I=0；iaH2长度；i ){ aH2[i].索引=我；aH2[i].onclick=function(){ if(this。类名=' '){ for(I=0；iaH2长度；i ){aH2[i].类名=aUl[I]。风格。显示='无'；} this . NAmE=' activeAul[this。索引]。风格。display=' block} else { this.className=aUl[this。索引]。风格。显示='无'；} } } for(I=0；iaUl.lengthi ){ aLi=aUl[i].getElementsByTagName(' Li ')；for(j=0；jaLi.lengthj){ arrli。push(AlI[j])；} } for(var I=0；iarrLi.length我)。onclick=function(){ for(I=0；iarrLi.length我)。class name=} this . class name=' hover } } }；/script/head dyul id=' list ' Li class=' lis ' H2我的好友/h2 ul li张三/li li张四/li li张五/li li张六/li /ul /li li class='lis' h2企业好友/h2 ul li李四/li li李小四/li li李四二/li li李毅/li li李二/li /ul /li li class='lis' h2黑名单/h2 ul li张三/li li李四/li /ul /li/ul/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。