仿qq好友列表

HTML

<ul class="box">
	<li>
		<span>我的好友</span>
		<div class="hidden">
			<a href="javascript:;">我的好友1</a>
			<a href="javascript:;">我的好友2</a>
			<a href="javascript:;">我的好友3</a>
			<a href="javascript:;">我的好友4</a>
		</div>
	</li>
	<li>
		<span>我的同事</span>
		<div class="hidden">
			<a href="javascript:;">我的同事1</a>
			<a href="javascript:;">我的同事2</a>
			<a href="javascript:;">我的同事3</a>
			<a href="javascript:;">我的同事4</a>
			<a href="javascript:;">我的同事5</a>
			<a href="javascript:;">我的同事6</a>
			<a href="javascript:;">我的同事7</a>
		</div>
	</li>
	<li>
		<span>黑名单</span>
		<div class="hidden">
			<a href="javascript:;">黑名单1</a>
			<a href="javascript:;">黑名单2</a>
		</div>
	</li>
</ul>

CSS

*{
	margin: 0;
	padding: 0;
}
.box{
	width: 290px;
	border: 1px solid #000;
	margin: 20px auto;
}
li{
	list-style: none;
}
span,
a{
	display: block;
	padding: 10px 0 10px 30px;
	position: relative;
	cursor: pointer;
}
span:after{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-left: 10px solid #C0C4CB;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	left: 10px;
	top: 50%;
	margin-top: -8px;
}
a{
	padding: 10px 0 10px 35px;
	color: #000;
	text-decoration: none;
}
a:before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	background: orchid;
	border-radius: 50%;
	left: 10px;
	top: 50%;
	margin-top: -10px;
}

span:hover,
a:hover{
	background: #C4C4C4;
}
.act:after{
	border-left: 10px solid #1F1F1F;
}
.act_show:after{
	border-top: 10px solid #1F1F1F;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}
.act1{
	background: #5C5C5C;
	color: #fff;
}
.hidden{
	display: none;
}
.show{
	display: block;
}

JS

var aSpan=document.getElementsByTagName("span");
var aDiv=document.getElementsByTagName("div");
var list=document.getElementsByTagName("a");
for (var i=0;i<aSpan.length;i++) {
	aSpan[i].index=i;
	//鼠标移入:当好友列表隐藏时鼠标移入箭头颜色加深，否则箭头改为指向下的箭头
	aSpan[i].onmouseover=function(){
		if(aDiv[this.index].className=="hidden"){
			this.className="act";
		}else{
			this.className="act_show";
		}
	}
	//鼠标移出：当好友列表隐藏时鼠标移出箭头颜色保持原样，否则箭头还是为指向下的箭头
	aSpan[i].onmouseout=function(){
		if(aDiv[this.index].className=="hidden"){
			this.className="";
		}else{
			this.className="act_show";
		}
	}
	//鼠标点击好友列表展现
	aSpan[i].onOff=true;
	aSpan[i].onclick=function(){
		//先让所有的好友列表隐藏、所有的好友大标题保持原先的样式
		for (var i=0;i<aSpan.length;i++) {
			aDiv[i].className="hidden";
			aSpan[i].className="";
		}
		if(this.onOff){
			//箭头改为向下的
			this.className="act_show";
			//好友列表显示
			aDiv[this.index].className="show";
			this.onOff=false;
		}else{
			//箭头颜色加深，鼠标移出恢复原貌
			this.className="act";
			//好友列表隐藏
			aDiv[this.index].className="hidden";
			//所有的开关改为真
			for (var i=0;i<aSpan.length;i++) {
				aSpan[i].onOff=true;
			}
			//清除所有好友列表的焦点
			for (var i=0;i<list.length;i++) {
				list[i].className="";
			}
		}
	}
}

//好友列表点击获得焦点
for (var i=0;i<list.length;i++) {
	list[i].onclick=function(){
		for (var i=0;i<list.length;i++) {
			list[i].className="";
		}
		this.className="act1";
	}
}