效果：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>