<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul , h2 { padding:0; margin:0; }
li { list-style:none; }
#list { width:240px; border:1px solid #333; margin:0 auto; }
#list .lis {}
#list h2 { height:30px; line-height:30px; text-indent:20px; background:url(img/ico1.gif) no-repeat 5px center #6FF; color:#000; }
#list .active { background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; }
#list ul { display:none; }
#list ul li { line-height:24px; border-bottom:1px solid #333; text-indent:24px; }
#list ul .hover { background:#6FF; }
</style>
<script>
/*window.onload = function (){
var oUl = document.getElementById('list');
var aH2 = oUl.getElementsByTagName('h2');
var aUl = oUl.getElementsByTagName('ul');
var aLi = null;
var arrLi = [];
// 循环给h2
for( var i=0; i<aH2.length; i++ ){
aH2[i].index = i;
//给所有H2添加按钮
aH2[i].onclick = function (){
for( var i=0; i<aH2.length; i++ ){
if( i != this.index ){
aUl[i].style.display = 'none';
aH2[i].className = '';
}
}
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++ ){
if( arrLi[i] !=this ){
arrLi[i].className = '';
}
}
if( this.className == '' ){
this.className = 'hover';
}else{
this.className = '';
}
};
}
};*/
window.onload=function(){
//ul
var oUl = document.getElementById('list');
//h2
var aH2 = oUl.getElementsByTagName('h2');
//第二个ul
var aUl = oUl.getElementsByTagName('ul');
var aLi=null;
var arrLi=[];
//循环aH2
for(var i=0;i<aH2.length;i++){
//给H2添加索引
aH2[i].index=i;
aH2[i].onclick=function(){
//如果h2的class为空
if(this.className==''){
//aul展开
aUl[this.index].style.display="block";
//给h2添加class ->this指向h2
this.className='active';
}else{
//aul展开
aUl[this.index].style.display="none";
//给h2添加class ->this指向h2
this.className='';
}
}
}
//获取第二个ul下面的li ->为了存入所有li
for(var i=0;i<aUl.length;i++){
//获取ul下面的li存入aLi
aLi=aUl[i].getElementsByTagName('li');
for(var j=0;j<aLi.length;j++){
//存入所有li
arrLi.push(aLi[j]);
}
}
//对LI做操作
for(var i=0;i<arrLi.length;i++){
//给所有li添加点击事件
arrLi[i].onclick=function(){
for(var i=0;i<arrLi.length;i++){
arrLi[i].className='';
}
this.className='hover';
}
}
}
</script>
</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>
<li>李四</li>
</ul>
</li>
<li class="lis">
<h2>黑名单</h2>
<ul>
<li>张小三</li>
<li>李小四</li>
</ul>
</li>
</ul>
</body>
</html>