自定义TREEVIEW UL无限极嵌套

背景：做一个多级图片分类管理，当然要用到TreeView，在asp.net中已经提供了此服务器控件，参照效果，自定义一个简单可控性高的就当做练手吧！

效果：如图，小图标 折叠 展开

   ico-treeview-1.png   ico-treeview-2.png

HTML：
    <div class="container mt30">
        <ul class="tree">
            <li><i class="ico-tv tv1 tv2"></i><a href="javascript:void(0)" class="op-tv o">销售部</a>
                
                <ul class="subtree">
                    <li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">标志图</a>                        
                        <ul class="subtree hide">
                            <li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">标志图</a></li>
                            <li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">邮件图</a></li>
                            <li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">天猫图</a></li>
                            <li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">场景图</a>                                
                                <ul class="subtree hide">
                                    <li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">标志图</a></li>
                                    <li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">邮件图</a></li>
                                    <li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">天猫图</a></li>
                                    <li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">场景图</a></li>
                                </ul>
                            </li>    
                        </ul>
                    </li>     
                    <li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">邮件图</a></li>
                    <li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">天猫图</a></li>
                </ul>
            
            </li>
        </ul>
    </div>

 

STYLE：

<style type="text/css">
    *{ margin:0; padding:0; }
    .mt30{ margin:30px 0 0 0; }
    .container{ width:800px; margin:0 auto; padding:30px; background:#f5f5f5; }
    ul{ list-style:none; }
    a{ text-decoration:none; font-size:12px; border:0; }
    .tree{ display:block; }
    .tree li{ clear:both; display:block; }
    .tree i,a{ float:left;  }
    .tree li ul.subtree{  display:block; margin-left:20px; }    
    .tree li ul.subtree.hide{ display:none; }
    .tree .ico-tv{ width:20px; height:20px; display:block; margin-top:2px; }
    /*+*/
    .tree .tv1{ background:url(images/ico-treeview-1.png) no-repeat; cursor:pointer; }
    /*-*/
    .tree .tv2{ background:url(images/ico-treeview-2.png) no-repeat; cursor:pointer; }
    .tree .o{ color:#ff8400; }
</style>

 

JAVASCRIPT：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".tree .ico-tv").click(function(){
        if($(this).parent("li").children("ul.subtree").length>0){
            $(this).toggleClass("tv2");
            $(this).parent("li").children("ul.subtree").toggleClass("hide");
        }
    });
    
    $(".tree .op-tv").click(function(){
        --节点标题点击事件
    });
    
    function treenode(nodes) {
        $.each(nodes, function (i,n) {
            if ($(n).children("ul.subtree").length > 0) {
                treenode($(n).children("ul.subtree li"));
            }else{
                $(n).children("i.ico-tv").removeClass("tv1");
            }
        });
    }
    
    treenode($(".tree li")); --递归取消没有子节点的图标
});
</script>

总结：

好的功能从小Case做起，平时多积累，才能够多学活用，动手比空想更重要！