<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ菜单实例展开与收缩</title>
<style>
*{margin:0;padding:0;}
ul,h2{margin:0;padding:0;}
li{list-style:none }
#list{240px;margin:0 auto;border:1px solid #333;}
#list .lis{}
#list h2{height:30px;line-height:30px;text-indent:20px;background:#6ff url(img/right.png) no-repeat 5px center;color:#000;}
#list h2.active{background:#ff9 url(img/down.png) no-repeat 5px center;color:#000;}
#list ul li{line-height:24px;border:1px solid #333;text-indent:24px}
#list ul{display:none;}
#list ul .hover{background:#6ff;}
</style>
</head>
<body>
<ul 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>
</ul>
</li>
<li class="lis">
<h2>我的同事</h2>
<ul>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
</ul>
</li>
</ul>
</body>
</html>
<script>
window.onload=function(){
var oUl=document.getElementById('list');
var aH2=oUl.getElementsByTagName("h2");
var aUl=oUl.getElementsByTagName("ul");
var aLi=null;
var arrLi=[];
for(var i=0;i<aH2.length;i++){
aH2[i].index=i;
aH2[i].onclick=function(){
if(this.className==''){
aUl[this.index].style.display='block';
this.className='active';
}else{
aUl[this.index].style.display='none';
this.className='';
}
}
}
for(var i=0;i<aUl.length;i++){
aLi=aUl[i].getElementsByTagName('li');
for(var j=0;j<aLi.length;j++){
arrLi.push(aLi[j]);
}
}
for(var i=0;i<arrLi.length;i++){
arrLi[i].onclick=function(){
for(var i=0;i<arrLi.length;i++){
arrLi[i].className='';
}
this.className='hover';
}
}
}
</script>