效果：css
1、布局：html
<div class="three_tree"> <div class="tree_title_cut"> <span>名称</span> <span>编码</span> <span>数据域</span> </div> <div class="list_group_li click_add_on"> <!-- <div class="list_box two"> <i class="toggleOn arrow_three"></i> <div class="list one"><span>海南市</span><span>03</span><span>03</span></div> <div class="two"> <div class="list"><span>市场部</span><span>1</span><span>0301</span></div> <div class="list"><span>技术部</span><span>2</span><span>0302</span></div> </div> </div> --> </div> </div>
2、样式：vue
* {padding: 0;margin: 0;box-sizing: border-box;} .two {display: none;} .three_tree { margin: 40px; border: 1px solid #ccc; } .three_tree .tree_title_cut { width: 100%; background-color: #e9edf5; font-size: 0; padding: 8px 0; border-bottom: 1px solid #ccc; } .three_tree .tree_title_cut span { width: 33.33%; display: inline-block; text-align: center; font-size: 14px; } .three_tree .tree_title_cut span:first-child{ text-align: left; padding-left: 10px; } .list_group_li .list { width: 100%; font-size: 0; padding: 5px 0; } .list_group_li .list.on { background-color: rgba(0,0,0,.075); } .list_group_li .list:hover { background-color: rgba(0,0,0,.035); } .list_group_li .list.on:hover { background-color: rgba(0,0,0,.075); } .list_group_li .list span { width: 33.33%; font-size: 13px; text-align: center; display: inline-block; } .list_group_li .list span:first-child{ text-align: left; padding-left: 20px; } .list_group_li .two { margin-left: 15px; position: relative; } .list_group_li >.two { margin-left: 0; display: block; } .list_group_li .list_box { position: relative; display: block; margin-left: 0; } .arrow_three { position: absolute; left: 10px; top: 9px; display: inline-block; width:0px; height:0px; border-top:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid #666; cursor: pointer; transition: 0.1s; } .arrow_three.on { transform: rotate(90deg); top: 14px; left: 6px; transition: 0.1s; } .arrow_three:hover { border-left:5px solid #000; }
3、看后台返回的数据是什么结构：jquery
看了一下，当children为空时，就是没有下一级。因此能够直接判断children是否为空并循环添加数据。数组
var data = [ { "text": "第一级1", "orgCode": "第一级编码1", "dataOrg": "01", "children": [ { "text": "第二级1", "orgCode": "第二级编码1", "dataOrg": "0101", "children": [ { "text": "第三级1", "orgCode": "第三级编码1", "dataOrg": "010101", "children": [ { "text": "第四级1", "orgCode": "第四级编码1", "dataOrg": "01010101", "children": [ ] }, { "text": "第四级2", "orgCode": "第四级编码2", "dataOrg": "01010102", "children": [ ] }, ] }, ] }, { "text": "第二级2", "orgCode": "第二级编码2", "dataOrg": "0102", "children": [ { "text": "第二级1", "orgCode": "第二级编码1", "dataOrg": "02", "children": [ ] } ] }, ] }, { "text": "第一级2", "orgCode": "第一级编码2", "dataOrg": "02", "children": [ { "text": "第二级1", "orgCode": "第二级编码1", "dataOrg": "0201", "children": [ ] }, ] }, { "text": "第一级3", "orgCode": "第一级编码3", "dataOrg": "03", "children": [ ] }, ];
4、JS代码：app
写一个方法threeTree，第一个参数array是数据，第二个参数html是存放数据的容器，第三个参数show是判断是否默认展现全不列表(不传或者false就只展现第一级内容)。ide
判断数组children若是不为空，即有下级内容，就执行threeTree方法并传入children的数据，若是一直有children，就一直执行，不然传入没有带三角符的列表。布局
function threeTree(array,html,show) { for (var i = 0; i < array.length; i++) { var object = array[i]; if (object.children != "") { var e = $('<div class="two"><i class="toggleOn arrow_three"></i></div>'); var f = $('<div class="list"><span>'+object.text+'</span><span>'+object.orgCode+'</span><span>'+object.dataOrg+'</span></div>'); e.append(f); html.append(e); threeTree(object.children,e,show); } else { html.append('<div class="two"><div class="list"><span>'+object.text+'</span><span>'+object.orgCode+'</span><span>'+object.dataOrg+'</span></div></div>'); } } // 是否展现所有 if (show) { html.find(".two").addClass('show').find(".arrow_three").addClass("on"); } } threeTree(data,$(".list_group_li"),false); $(function(){ // 多级树 点击添加类名on $(document).on('click', '.click_add_on .list', function() { $(this).parents(".click_add_on").find(".list").removeClass("on"); $(this).addClass("on"); }); // 多级树 toggle $(document).on('click', '.click_add_on .arrow_three', function() { if ($(this).hasClass("on")) { $(this).removeClass("on").siblings(".two").hide(); }else{ $(this).addClass("on").siblings(".two").show(); } }); });
5、总结：this
遇到这种需求，用vue或者angular来处理会方便不少......那我还用js?由于有些人还不会用vue或者angular啊哈哈哈哈！编码
6、demo代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多级树</title> <style type="text/css"> *{padding:0;margin:0;box-sizing:border-box;} .two{display:none;} .three_tree{margin:40px;border:1px solid #ccc;} .three_tree .tree_title_cut{width:100%;background-color:#e9edf5;font-size:0;padding:8px 0;border-bottom:1px solid #ccc;} .three_tree .tree_title_cut span{width:33.33%;display:inline-block;text-align:center;font-size:14px;} .three_tree .tree_title_cut span:first-child{text-align:left;padding-left:10px;} .list_group_li .list{width:100%;font-size:0;padding:5px 0;} .list_group_li .list.on{background-color:rgba(0,0,0,.075);} .list_group_li .list:hover{background-color:rgba(0,0,0,.035);} .list_group_li .list.on:hover{background-color:rgba(0,0,0,.075);} .list_group_li .list span{width:33.33%;font-size:13px;text-align:center;display:inline-block;} .list_group_li .list span:first-child{text-align:left;padding-left:20px;} .list_group_li .two{margin-left:15px;position:relative;} .list_group_li >.two{margin-left:0;display:block;} .list_group_li .list_box{position:relative;display:block;margin-left:0;} .arrow_three{position:absolute;left:10px;top:9px;display:inline-block;width:0px;height:0px;border-top:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #666;cursor:pointer;transition:0.1s;} .arrow_three.on{transform:rotate(90deg);top:14px;left:6px;transition:0.1s;} .arrow_three:hover{border-left:5px solid #000;} </style> </head> <body> <div class="three_tree"> <div class="tree_title_cut"> <span>名称</span> <span>编码</span> <span>数据域</span> </div> <div class="list_group_li click_add_on"> <!-- <div class="list_box two"> <i class="toggleOn arrow_three"></i> <div class="list one"><span>海南市</span><span>03</span><span>03</span></div> <div class="two"> <div class="list"><span>市场部</span><span>1</span><span>0301</span></div> <div class="list"><span>技术部</span><span>2</span><span>0302</span></div> </div> </div> --> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> var data = [ { "text": "第一级1", "orgCode": "第一级编码1", "dataOrg": "01", "children": [ { "text": "第二级1", "orgCode": "第二级编码1", "dataOrg": "0101", "children": [ { "text": "第三级1", "orgCode": "第三级编码1", "dataOrg": "010101", "children": [ { "text": "第四级1", "orgCode": "第四级编码1", "dataOrg": "01010101", "children": [ ] }, { "text": "第四级2", "orgCode": "第四级编码2", "dataOrg": "01010102", "children": [ ] }, ] }, ] }, { "text": "第二级2", "orgCode": "第二级编码2", "dataOrg": "0102", "children": [ { "text": "第二级1", "orgCode": "第二级编码1", "dataOrg": "02", "children": [ ] } ] }, ] }, { "text": "第一级2", "orgCode": "第一级编码2", "dataOrg": "02", "children": [ { "text": "第二级1", "orgCode": "第二级编码1", "dataOrg": "0201", "children": [ ] }, ] }, { "text": "第一级3", "orgCode": "第一级编码3", "dataOrg": "03", "children": [ ] }, ]; function threeTree(array,html,show) { for (var i = 0; i < array.length; i++) { var object = array[i]; if (object.children != "") { var e = $('<div class="two"><i class="toggleOn arrow_three"></i></div>'); var f = $('<div class="list"><span>'+object.text+'</span><span>'+object.orgCode+'</span><span>'+object.dataOrg+'</span></div>'); e.append(f); html.append(e); threeTree(object.children,e,show); } else { html.append('<div class="two"><div class="list"><span>'+object.text+'</span><span>'+object.orgCode+'</span><span>'+object.dataOrg+'</span></div></div>'); } } // 是否展现所有 if (show) { html.find(".two").addClass('show').find(".arrow_three").addClass("on"); } } threeTree(data,$(".list_group_li"),false); $(function(){ // 多级树 点击添加类名on $(document).on('click', '.click_add_on .list', function() { $(this).parents(".click_add_on").find(".list").removeClass("on"); $(this).addClass("on"); }); // 多级树 toggle $(document).on('click', '.click_add_on .arrow_three', function() { if ($(this).hasClass("on")) { $(this).removeClass("on").siblings(".two").hide(); }else{ $(this).addClass("on").siblings(".two").show(); } }); }); </script> </body> </html>