<div> <div> <script type="text/html"> <div> <div menurl="notice.html"> <span><img src="https://www.jb51.net/images/icon_home.png" alt=""></span> <span>首页</span> <span><img src="https://www.jb51.net/images/icon_arrow.png" alt=""></span> </div> </div> <%var menus = data.menus;%> <%for(var i = 0;i < menus.length;i++){%> <div> <div menurl=<%=menus[i].url%> > <span><img src="" alt=""></span> <span><%=menus[i].name%></span> </div> <%var childmenus = menus[i].childs;%> <%for(var j = 0;j < childmenus.length;j++){%> <div> <div menurl=<%=childmenus[j].url%> > <%if(childmenus[j].childs.length != 0){%> <span><img src="https://www.jb51.net/images/icon_add.png" alt=""></span> <span><%=childmenus[j].name%></span> <%}else{%> <span><%=childmenus[j].name%></span> <span><img src="https://www.jb51.net/images/icon_arrow.png" alt=""></span> <%}%> </div> <%var cchildmenus = childmenus[j].childs;%> <%for(var k = 0;k < cchildmenus.length;k++){%> <div> <div menurl=<%=cchildmenus[k].url%> > <%if(cchildmenus[k].childs.length != 0){%> <span><img src="https://www.jb51.net/images/icon_add.png" alt=""></span> <span><%=cchildmenus[k].name%></span> <%}else{%> <span><%=cchildmenus[k].name%></span> <span><img src="https://www.jb51.net/images/icon_arrow.png" alt=""></span> <%}%> </div> <%var ccchildmenus = cchildmenus[k].childs;%> <%for(var l = 0;l < ccchildmenus.length;l++){%> <div menurl=<%=ccchildmenus[l].url%> > <span><%=ccchildmenus[l].name%></span> <span><img src="https://www.jb51.net/images/icon_arrow.png" alt=""></span> </div> <%}%> </div> <%}%> </div> <%}%> </div> <%}%> </script> </div>
后台传入的数据格式为
菜单效果如图：
存在的不足和问题：
为了跟上项目进度，tree.js尚未组件化，等有时间了打算把这一块封装为一个js组件，通过设置参数完成树状栏的设置。
P.S.由于个人技术水平有限，难免出现错误，请多多指正 :)