纯div实现tree目录树dome实例、加实现逻辑介绍

实现逻辑：

/**
         * 树结构需要字段
         * 1.树key
         * 2.树value
         * 3.点击对应的key 展示对应的value
         * 重点
         *     1.key和value 有同一id
         *     2.value 中有唯一的class 提供给key点击后做事件使用
         * 
         */

目录书截图：

代码

   va htmlStr  =  "";
   htmlStr += '<div style="width:80%;line-height:30px;position:absolute;cursor:pointer;">'
                +'<div class="treeFatherK" ids="000">基础图层</div>' //一级树key
                    +'<div class="treeFatherV c000" ids="000">'//外层div value
                        +'<div class="treeSon">南流江工业区</div>'    //二级树
                        +'<div class="treeSon">南流江河流流经乡镇</div>'    //二级数据
                    +'</div>'
                +'<div class="treeFatherK" ids="001">水专题</div>' //一级树key
                    +'<div class="treeFatherV c001" ids="001">'//一级树value
                        +'<div class="treeFatherK" ids="011">河流水系</div>'    //二级树key
                            +'<div class="treeFatherV c011" ids="011">'    //二级树value
                                +'<div class="treeSon">南流江河流流经乡镇</div>'    //三级树
                                +'<div class="treeSon">南流江河流覆盖面</div>'    //三级数据
                                +'<div class="treeSon">南流江河流水系</div>'    //三级数据
                                +'<div class="treeSon">北海河流分布</div>'    //三级数据
                            +'</div>'
                        +'<div class="treeFatherK" ids="021">监测点位</div>'    //二级数据key
                            +'<div class="treeFatherV c021" ids="021">'    //二级树value
                                +'<div class="treeSon">入河排污口</div>'    //三级树
                                +'<div class="treeSon">监测断面</div>'    //三级数据
                            +'</div>'
                    +'</div>'
            +'</div>';
        //添加到div中
        $("#topicpanel").empty().append(htmlStr);
        //设置基本样式
        $(".treeFatherK").css({"margin-left":"30px"});
        $(".treeFatherV").css({"margin-left":"30px","display":"none"});
        $(".treeSon").css({"margin-left":"30px"});
        $("#topicpanel div").css({"background-color":"#F2F2F2"});

       //树目录单击事件
        $(".treeFatherK").click(function(){
            var textVal = $(this).attr("ids");
            if($(".c"+textVal).css("display") == "none"){
                $(".c"+textVal).css("display","block");
            }else{
                $(".c"+textVal).css("display","none");
            }
        });