jquery+css+html无限级tree树形菜单（含复选框）

　　最近在做前端页面改版，将以前的静态布局用bootstrap+自定义样式重构web页面。今日按jpg效果图重构了一个树目录菜单。架构思路不难，跟第一篇发的“非常简洁的仿js树形菜单”差不多，难在要在细节上处理好，时间有限，就是多选框那里处理不太好，可以自行再优化。效果向下兼容至IE8，以下分享源码：

CSS规则：

 .wrapper{width: 300px; height: 400px; overflow-x: scroll;border: 1px solid #ccc;margin: 0 auto;}
        .fold{ display:none;}
        .aiui .checkbox{ width: 15px; height: 15px; border: 1px solid #dadada; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin:2px 5px 0 0;cursor: pointer; }
        .aiui .c-selected{ border: 1px solid #27b0f2; position: relative;}
        .aiui .c-selected:after{ content:''; display:block; width:100%; height:100%; position: absolute; left: 0; top: 0; background:#27b0f2 url("ai_icon.png") no-repeat -36px -1px; }
        .aiui .c-selected:after{ background-position: -1px -1px;}
        .aiui .checkbox > input{ margin: 0; visibility: hidden;}
        .pull-left{ float: left;}
        .c-f:after{content:".";display:block;height:0;clear:both;visibility:hidden}
         ul,li,i{ list-style:none; padding:0; margin:0; font-style:normal;}
        .ai-treenav{ width:100%;}
        .ai-treenav ul{ margin-left:20px;}
        .ai-treenav i{width:14px; height:14px; background:url("ai_icon.png") no-repeat -4px -33px; margin:2px 7px 0 0; float: left}
        .ai-treenav i.unfold, .ai-treenav .item-name-last > i{width:14px; height:14px;  background:url("ai_icon.png") no-repeat -24px -33px;}
        .ai-treenav a{display:block; font-size:14px; height:22px; padding:3px 0; color:#666; overflow:hidden;}
        .nav-trunk{ margin-left:20px;}
        .ai-treenav .checkbox{ margin-top: 0;}
        .ai-treenav .filename,.ai-treenav .filename-open{background: url("ai_icon.png") no-repeat 0 -72px; padding-left: 25px; width: 50%;white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
        .ai-treenav .filename-open{ background-position: 0 -52px;}
        .ai-treenav li.unfold{min-width: 250px;}
        .ai-treenav li.unfold > ul li .filename{ width: 60%;}

HTML源码

    

        

            

                

                    
一级目录名称
                        

                            
二级目录名称好长好长好长呀
                                

                                    
 
三级目录名称
                                       

                                           
四级目录名称
                                             

                                                 
五级目录名称
                                             
                                           
                                       
                                    
                                
                            
                        
                    
                    
一级目录名称
                        

                            
二级目录名称
                                

                                    
 
三级目录名称
                                    
                                
                            
                        
                    
                    
一级目录名称
                        

                            
二级目录名称
                                

                                    
 
三级目录名称
                                    
                                    
 
三级目录名称
                                    
                                    
 
三级目录名称
                                    
                                
                            
                        
                    
                
            
        
    

JS:

  $(function () {
    $(".item-name > i").click(function(){
        $(this).parent().parent().toggleClass("unfold")
        $(this).parent().parent().find("ul:first").slideToggle(500);
        $(this).toggleClass("unfold");
        $(this).parent().children(".filename").toggleClass("filename-open");
    });
    });
    $(function () {
        $(".checkbox").click(function (){
            $(this).toggleClass("c-selected");
        });
    });

运行效果：

 所用到的背影图片: