jquery+css实现html选择树或树形菜单

本文将介绍利用jquery+css实现html选择树或树形菜单的方法，无需其他插件，十分简洁明了。

主要利用

标签加上样式调整。

先上效果图：

下面上CSS代码：

li{
    position:relative !important;
}

li input {  
position:absolute;left:0;margin-left:0;opacity:0;z-index:2;cursor:pointer;height:1em;width:1em;top:0;  
}  
input + ol {  
display:none;  
background:url('../myImg/toggle.png') 0px 0px no-repeat;
margin:-1em 0 0 0;
display:block; 
padding:1em 0 0 1em; 
background-size:.8em .8em; 
}  
input + ol > li {  
height:0;overflow:hidden;padding-left:1px;  
}  
li label,a {  
 cursor:pointer;display:block;padding-left:1.3em;
}  
input:checked + ol {  
 background:url('../myImg/toggled.png') 0px 0px no-repeat;
 display:block; 
 background-size:.8em .8em;
}  
input:checked + ol > li {  
height:auto;  
}   

 

然后是html代码，贴1-1级菜单示范，剩余的各位可自行扩展。标签内的是叶节点。

		
  
                    1-1级  
                      
                    
 
                        

                            2-1级
                        
 
                        
  
                            2-2级  
                              
                            
  
                            
无限级
  
                            
无限级
  
                            
无限级
  
                            
无限级
  
                            
无限级
  
                            
无限级
  
                            
  
                        
  
                        
  
                            2-3级  
                              
                            
  
                            
无限级
  
                            
无限级
  
                            
无限级
  
                            
无限级
  
                            
无限级
  
                            
无限级
  
                            
  
                        
                    
  
                
  
                

菜单左边的加减图片可自行替换哦。

嗯，就是这么简单~ 无需js加持~ 当然点击要获取数据之类的还是要根据需要添加啦。