演示地址：

    

     实现效果：

     

 

HTML代码：

	
     	
     
      
	
       
	
第一类目
    
        
    	
         
1
    	
         
2
    	
         
3
    	
         
4
    
        
	
	
       
		
第二类目
		
        
			
         
5
			
         
6
			
         
7
		
        
	
	
       
	   
第三类目
		
        
			
         
8
			
         
9
			
         
10
			
         
11
		
        
	
	
       
	   
第四类目
		
        
			
         
12
			
         
13
			
         
14
			
         
15
		
        
	
      
     
	

 

CSS代码：

/** by @Kevinの快乐时代 *2015/5/21*/*{     	margin: 0;padding: 0;     }     ul,li{      	list-style: none;      }    .main{    	width: 300px;    	color:#666;    	position: absolute;    	top: 0;    	right: 0;    	bottom: 0;    	left: 0;    	margin:auto;     }    .main ul li ul{    	display: none;    	padding: 15px;    	background-color: #ecf0f1;    }    #expand li ul li {  padding: 5px 0;  border-bottom: 1px dotted #999;}.h3-common{	  font-size: 15px;	   color: #fff;	   padding: 5px 22px;	   border-bottom: 1px dotted #e7e7e7;}    .main h3{      	   background: url(http://www.iconfont.cn/uploads/fonts/font-155705-.png?color=ecf0f1&size=20) no-repeat #00bb9c left center;    }    .main h3.active{    	  background: url(http://www.iconfont.cn/uploads/fonts/font-69084-.png?color=ecf0f1&size=20) no-repeat #ea8010 left center;    }    .li_active{    	background-color: #56abe4;    	color: #fff;    	text-align: center;    	border-radius: 3px;    }

 

javascript代码：

 

var oExpand=document.getElementById('expand');  var ah3=oExpand.getElementsByTagName('h3');  var aUl=oExpand.getElementsByTagName('ul');  var aLi=null;  var arrLi=[];for(var i=0;i