SOURCE

window.onload = function (){
	(function (){
			var oUl= document.getElementById('list');
			var aUl = oUl.getElementsByTagName('ul');
			var aH3 = oUl.getElementsByTagName('h3');
			var aLi = null;
			var arr = [];
			for(var i=0; i<aUl.length; i++){
				aLi = aUl[i].getElementsByTagName('li');
				for(var j=0; j<aLi.length;j++){
					arr.push(aLi[j]); //将所有好友存入数组
				}
			}
			//console.log(arr);
			for(var i =0; i<arr.length;i++){
				arr[i].onclick = function (){
					for(var i =0; i<arr.length;i++){
						arr[i].className = '';
					}
					this.className = 'turncol';
				};
			}
			
			
			for(var i =0; i<aH3.length;i++){
				aH3[i].index = i;
				aH3[i].onclick = function (){
					if(this.className=='active'){
						this.className = '';
						aUl[this.index].className = '';
						
					}else{
						this.className = 'active';
						aUl[this.index].className = 'show';
					}
					
					/*下面注释代码是点击某一个好友分组,其他好友分组会收起来，只展开当前好友分组*/   
					
					for(var i =0; i<aH3.length; i++){
					aH3[i].className = '';
					aUl[i].className = '';
					}
					this.className = 'active';
					aUl[this.index].className = 'show';
				
				};
			}
                
   })();
};

<ul id="list">
        <li class="list">
            <h3>我的好友</h3>
            <ul>
                <li>张三</li>
                <li>张三</li>
                <li>张三</li>
            </ul>
        </li>
        <li class="list">
            <h3>我的同学</h3>
            <ul>
                <li>李四</li>
                <li>李四</li>
                <li>李四</li>
                <li>李四</li>
            </ul>
        </li>
        <li class="list">
            <h3>黑名单</h3>
            <ul>
                <li>王五</li>
                <li>王五</li>
            </ul>
        </li>
    </ul>

*{margin:0; padding:0;}
ul li{list-style: none; font-family: microsoft yahei;}
ul#list{width:300px; margin:100px auto;}
ul#list li.list h3{background:cyan url(http://sandbox.runjs.cn/uploads/rs/320/o4hcxczl/off.jpg) no-repeat 3px center; text-indent:23px;}
ul#list li.list ul li{text-indent:40px; height:26px; line-height: 26px; border-top:1px solid black;}
ul#list ul{display:none;}

ul#list li.list h3.active{ background:pink url(http://sandbox.runjs.cn/uploads/rs/320/o4hcxczl/on.jpg) no-repeat 3px center;}
ul#list li.list ul li.turncol{background:yellow;}
ul#list ul.show{display:block;}