<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #aside .aside-content>ul ul{ display: none; } </style> </head> <body> <div id="aside" style="padding: 20px;border: 1px solid;"> <div class="aside-scroll" style="padding: 20px;border: 1px solid;"> <div class="aside-content" style="padding: 20px;border: 1px solid;"> </div> </div> </div> <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script> <script> //也可以单独提取到json文件中，通过get方式ajax读取 var nodes =[ { id:1, pId:0, name:"随意勾选 1"}, { id:11, pId:1, name:"随意勾选 1-1"}, { id:111, pId:11, name:"随意勾选 1-1-1"}, { id:112, pId:11, name:"随意勾选 1-1-2", checked:true}, { id:12, pId:1, name:"随意勾选 1-2"}, { id:121, pId:12, name:"随意勾选 1-2-1"}, { id:122, pId:12, name:"随意勾选 1-2-2"}, { id:2, pId:0, name:"随意勾选 2"}, { id:21, pId:2, name:"随意勾选 2-1"}, { id:22, pId:2, name:"随意勾选 2-2"}, { id:221, pId:22, name:"随意勾选 2-2-1", checked:true}, { id:222, pId:22, name:"随意勾选 2-2-2"}, { id:23, pId:2, name:"随意勾选 2-3"} ]; //简单节点树，转为父子children节点树 simpleRevComplexData = function(nodes){ var nodePoint = {}; for(var i in nodes){ nodePoint[nodes[i].id] = nodes[i]; } console.log(nodePoint) var node = []; for(var i in nodes){ if(nodes[i].pId in nodePoint){//if(nodePoint[nodes[i].pId]) (nodePoint[nodes[i].pId].children || (nodePoint[nodes[i].pId].children = [])).push(nodes[i]); }else{//不在则是顶级节点 node.push(nodes[i]); } } return node; }; console.log(simpleRevComplexData) //递归渲染 function renderList(data,showArea){ if(data.length){ var $ul = $('<ul></ul>'); for(var i in data){ var $li = $('<li><span node-id="'+data[i].id+'">'+data[i].name+'</span></li>'); $ul.append($li); if(data[i].children && data[i].children.length>0){ renderList(data[i].children,$li); } } showArea.append($ul); } }; //改用on监听动态添加的节点 $('#aside .aside-content').on('click','span',function(){ var $this = $(this); //ul是否可见 if($this.next().is(":visible")){ $this.next().hide(); }else{ //判读ul是否存在 var $ul = $this.next().size()? $this.next().show():$this; //隐藏其它兄弟元素 $ul.closest('li').siblings().find('ul').hide(); } }); //方法调用 var nodes = simpleRevComplexData(nodes); renderList(nodes,$("#aside").find('.aside-content')); </script> </body> </html>