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源码

<div  class="wrapper">
<div class="aiui">
    <div class="ai-treenav">
        <ul>
            <li>
                <ul class="nav-trunk">
                    <li ><a  class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox c-selected"><input type="checkbox"></div></span><span class="pull-left filename">一级目录名称</span></a>
                        <ul class="nav-trunk fold ">
                            <li ><a  class="item-name c-f" title="二级目录名称二级目录名称二级目录名称"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename" >二级目录名称好长好长好长呀</span></a>
                                <ul class="nav-trunk fold">
                                    <li> <a  class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">三级目录名称</span></a>
                                       <ul class="nav-trunk fold" >
                                           <li><a  class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">四级目录名称</span></a>
                                             <ul class="nav-trunk fold">
                                                 <li><a  class="item-name item-name-last  c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">五级目录名称</span></a></li>
                                             </ul>
                                           </li>
                                       </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li ><a  class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">一级目录名称</span></a>
                        <ul class="nav-trunk fold ">
                            <li ><a  class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">二级目录名称</span></a>
                                <ul class="nav-trunk fold">
                                    <li> <a  class="item-name  item-name-last c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">三级目录名称</span></a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li ><a  class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">一级目录名称</span></a>
                        <ul class="nav-trunk fold ">
                            <li ><a  class="item-name c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">二级目录名称</span></a>
                                <ul class="nav-trunk fold">
                                    <li> <a  class="item-name  item-name-last c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">三级目录名称</span></a>
                                    </li>
                                    <li> <a  class="item-name  item-name-last c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">三级目录名称</span></a>
                                    </li>
                                    <li> <a  class="item-name  item-name-last c-f"><i></i><span class="pull-left"><div class="checkbox"><input type="checkbox"></div></span><span class="pull-left filename">三级目录名称</span></a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</div>

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");
        });
    });

运行效果：

 所用到的背影图片: