如何实现一级二级三级菜单

[baidu_37726227]

这是原公司的代码，这里只是一个一级菜单，我不知道怎么改成二级三级菜单，求大神帮帮写写，急急急！

菜单要求：
6、学校管理 （一级菜单）
6.1、校园微官网管理（为二级菜单）
6.1.1、学校信息 （三级菜单）
6.1.2、轮播图片
6.1.3、老师风采
6.1.4、学校新闻
6.1.5、学校新闻
6.2、校园通录讯管理
6.3、微校园卡休眠时间管理 （为二级菜单）
6.4、成员在线数据管理 （为二级菜单）


<%@page import="com.yst.bean.AdminUser"%>
<%@page import="com.yst.util.SessionUtil"%>
<%
String url = request.getRequestURI();
int index = url.indexOf("manage/");
String link = url.substring(index + 7, url.length()-4);
AdminUser u = SessionUtil.getLoginAdminUser(request);
String role = u.getRole();
%>

<aside>
<div class="nav-collapse " id="sidebar" style="overflow: hidden; cursor: grab;">
<!-- sidebar menu start-->
<ul id="nav-accordion" class="sidebar-menu">
<%if ("U".equals(role)) {%>
<li class="sub-menu dcjq-parent-li">
<a href="javascript:;" class="dcjq-parent">
<i class="fa fa-cogs"></i>
<span>优视通管理</span>
<span class="dcjq-icon"></span></a>
<ul class="sub" style="display: none;">
<li><a href="manage_corp" class="pagelink">企业号授权</a></li>
<li><a href="manage_card" class="pagelink">学生证管理</a></li>
<li><a href="manage_productinfo" class="pagelink">产品介绍管理</a></li>
<li><a href="manage_feedback" class="pagelink">意见反馈</a></li>
<li><a href="manage_studyzone" class="pagelink">学习园地</a></li>
</ul>
</li>
<%} %>
<%if ("A".equals(role) || "B".equals(role)) {%>
<li class="sub-menu dcjq-parent-li">
<a href="javascript:;" class="dcjq-parent">
<i class="fa fa-cogs"></i>
<span>学校管理</span>
<span class="dcjq-icon"></span></a>
<ul class="sub" style="display: none;"
<li><a href="party" class="pagelink" target="_blank">校园通录讯管理</a></li>
<li><a href="edit_school" class="pagelink">学校信息</a></li>
<li><a href="manage_banner" class="pagelink">轮播图片 </a></li>
<li><a href="manage_teacher" class="pagelink">老师风采 </a></li>
<li><a href="manage_news" class="pagelink">学校新闻</a></li>
<li><a href="manage_honor" class="pagelink">学校新闻</a></li>
<li><a href="manage_sleeptime" class="pagelink">微校园卡休眠时间管理</a></li>
<li><a href="manage_online" class="pagelink">成员在线数据管理</a></li>
</ul>
</li>
<%} %>
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<script src="js/jquery.js"></script>
<script>
$('#sidebar .pagelink').each(function(){
var link = "<%=link%>";
var alink = $(this).attr("href");
if (link == alink){
$(this).parent().addClass("active");
$($(this).parent().parent().parent().children()[0]).addClass("active");
}
});
</script>

[qq_36001928]

沙发，学习了

[baidu_37726227]

学习啥哦，这个只是一个一级菜单，能帮忙不

[励志小青年11]

用递归完全可以实现

[baidu_37726227]

大哥，上面有代码，可以帮我实现出来吗,我不知道前端这个怎么写

[七脉]

一二三级页面显示效果如果不用框架，需要美工画好，建立一个树形表，然后JS与后台交互查询树形表数据并填充到前台美工画的页面。

[baidu_37726227]

这个项目已经完成了，现在是搞一些维护，之前只有一个一级菜单，现在想分一下类，搞二级菜单和三级菜单。就是不知道如何实现，一点前端知识都没有呀，何况树结构怎么实现的了

[不放的小二郎]

思路： 一、写集合 1.获取所有为一级节点的集合 2.获取所有为二级节点的集合 3.获取所有为三级节点的集合 二、比较 通过父子节点的关系，找到对应的分组 如第二级的父节点==第一级的节点 如第三级的父节点==第二级的节点 <c:forEach var="index" items="${indexList }" varStatus="s"> <ul id="menu-index"> <li><a _href="${index1.menuUrl }" data-title="${index1.permissionName }" href="javascript:void(0)">${index1.permissionName }</a></li> <ul> <c:forEach var="index1" items="${indexList1 }" varStatus="s1"> <c:if test="${index1.parentFolderid == index.folderid }"> <li><a _href="${index1.menuUrl }" data-title="${index1.permissionName }" href="javascript:void(0)">${index1.permissionName }</a></li> </c:if> </c:forEach> </ul> </ul> </c:forEach>

[昆仑山人]

赞同五楼的说法，其实只用弄一个延迟加载就好了，点哪个加载哪个。或者是封装成一个Map，Map里面在封装一个map

[疏可跑马]

可以参考 http://www.html5tricks.com/jquery-mult-select.html

[huanlin08]

代码下载：http://www.ablanxue.com/prone_1466_1.html

[聪头]

js。网上有很多例子

[恋无可恋的青空-]

网上很多模板呀

[GrayHJX]

网上例子很多啊，手风琴组件完成这种菜单