即时通信软件菜单大家都见过，这样有以下的功能：1.点击我的好友，会展示下拉出具体的好友2.再点击我的好友，会收缩3.首次点击具体的某个好友，只有当前这个好友高亮4.再次点击这个好友时，高亮状态就消失了

还是瞄一眼效果图吧：

最后代码

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /styleul，H2 { padd :0 margin :0 } Li { list-style : none；} # list { width :200 pxmargin :0 auto order :1 px固体# 000;} # list { width :200 px } # list H2 { width :200 px高度：30 px线高：30 px文本对齐：居中；背景： URL(img/ico1。gif)不重复20% 50% # 6699 ff；文本缩进：24像素；边框-bottom:1px虚线# 000;} #列出H2。活动{后台： URL(img/ico 2。gif)不重复20% 50% # ffcc 99；} #列表ul { width:200px文本对齐：居中；display:none} #列出ul li {宽度：200像素高度：30 px线高：30 px} #列出ul李。突出显示{背景： # FF66FF}/styletitle无标题文档/title脚本窗口。onload=function(){ var OUl=document。getelementbyid(' list ')；var Oh2=OUl。GetElementsBytagname(' H2 ')；var AuL=OUl。GetElementsBytagname(' ul ')；var AlI=[]；var arr=[]；var oldLi=nullvar num=0；//点击菜单显示隐藏for(var I=0；i oH2。长度；i ) { oH2[i].索引=我；oH2[i].onclick=function(){ if(this。类名==' '){ AuL[this。索引]。风格。display=' blockthis . NAmE=' active } else { AuL[this。索引]。风格。显示='无'；this.className=} } } //获取菜单中的每个里为(var I=0；i aUl.lengthi ) { aLi=aUl[i].getElementsByTagName(' Li ')；for(var j=0；j aLi.lengthj){ arr。push(AlI[j])；} } //遍历对于AlI(var I=0；一、长度；i ) { arr[i].onOff=falsearr[i].onclick=function () { //当上一个点击的里不是当前点击的李如果（老李老李！==这个){ oldli . class name=oldli . onoff=false } this . class name=this . onoff？":"高亮显示；this.onOff=！这个。开/关；oldLi=这个；} } }/script/head dyul id=' list ' Li class=' lis ' H2我的好友/h2 ul li张三1/李莉张三2/李莉张三3/li /ul /li li class='lis' h2企业好友/h2 ul li李四1/李莉李四2/李莉李四3/li /ul /li li class='lis' h2黑名单/h2 ul li王五1/李莉王五2/li /ul /li/ul/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。