原生js实现简单的展开收缩

<ul>
	<li>
		<a href="javascript:">
			<i class="icon"></i>
			<span>我的好友</span>
		</a>
		<div>
			<p>张三</p>
			<p>李四</p>
		</div>
	</li>
	<li>
		<a href="javascript:">
			<i class="icon"></i>
			<span>我的企业</span>
		</a>
		<div>
			<p>企业1</p>
			<p>企业2</p>
		</div>
	</li>
	<li>
		<a href="javascript:">
			<i class="icon"></i>
			<span>黑名单</span>
		</a>
		<div>
			<p>黑名单1</p>
			<p>黑名单2</p>
		</div>
	</li>
</ul>

	body{
		font-size: 12px;
		margin: 50px  400px;
	}
	*{
		padding: 0;
		margin: 0;
	}
	ul{
		width: 120px;
		border: 1px solid #e6e6e6;
		background: #fff;
		list-style: none;
	}

	ul>li>a{
		display: block;
		padding:5px   12px;
		background: #f2f2f2;
		text-decoration: none;
		color: #000;
		font-size: 14px;
	}
	ul>li .icon{
		display: inline-block;
		width: 6px;
		height: 9.5px;
		background: url("img/xia-not-selected.png") no-repeat ;
		background-size: 6px 9.5px;
	}
	ul>li .icon-two{
		display: inline-block;
		width: 9.5px;
		height: 6px;
		background: url("img/xia-selected.png")no-repeat;
		background-size: 9.5px 6px;
	}
	li>div{
		display: none;
	}
	li>div>p{
		padding: 5px 0 5px 16px ;
		border-bottom:1px solid #f2f2f2;
		cursor: pointer;
	}
	.active{
		background: chocolate;
	}

window.οnlοad=function () {
	var an=document.getElementsByTagName("a");
	var Div=document.getElementsByTagName("div");
	var icon=document.getElementsByTagName("i");
	var active=document.getElementsByTagName("p");
	for(var i=0;i<an.length;i++){
		an[i].index=i;
		active[i].index=i;
		an[i].οnclick=function () {
			if(icon[this.index].className=="icon-two"){
				icon[this.index].className="icon";
				Div[this.index].style.display="none";
			}else {
				for(var j=0;j<an.length;j++){
					icon[j].index=j;
					Div[j].index=j;
					icon[j].className="icon";
					Div[j].style.display="none";
				}
				icon[this.index].className="icon-two";
				Div[this.index].style.display="block";
			}
		};
		for(var s=0; s<active.length;s++){
			active[s].index=s;
			active[s].οnclick=function () {
				for(var k=0;k<active.length;k++){
					active[k].className="";
				}
				active[this.index].className="active";
			}
		}
	}
}