使用无序列表ul实现多级菜单

首先要求后端传来的菜单数据必须包含：

id---菜单id
pid---父菜单id

整体思想：首先渲染出整个菜单（不包含父子关系），再用js将各标签分组、挂载到父结点上。

这里给各个菜单增加自定义属性pid，如下（jsp代码）：

<ul class="navbar" style="width: 100%"><c:forEach var="menu" items="${menus}"><li id="${menu.menuId}" data-pid="${menu.pId}"><a href="${menu.url}" target="center" onclick="showMenu(this);return false;">${menu.menuName}<img src="./img/open.png" alt=""></a></li></c:forEach></ul>

其中，data-pid（data-xxx-xxx格式）为目前使用较多的自定义属性定义方式

在js中的代码为：

//html加载完毕后执行
window.onload = function () {var list = document.getElementsByTagName("li");for (var i = 0; i < list.length; i++) {if (list[i].dataset.pid === "") {//这里是顶级菜单} else if (list[i].dataset.pid !== "") {//这里是子结点//取出pidvar pid = list[i].dataset.pid;var pele = document.getElementById(pid);//寻找父菜单if (document.getElementById("u" + pid) == null) {//不存在则创建var ul = document.createElement("ul");ul.setAttribute("id", "u" + pid);ul.appendChild(list[i]);pele.appendChild(ul);} else {//存在则添加var ul = document.getElementById("u" + pid);ul.appendChild(list[i]);}}}}

使用无序列表ul实现多级菜单相关推荐

有序列表ol与无序列表ul用法
有序列表<ol>与无序列表ul用法其中<li> 标签定义列表项目,<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中 ...
html生成无序列表,CSS无序列表创建的标准菜单效果代码
本文实例讲述了CSS无序列表创建的标准菜单效果代码.分享给大家供大家参考.具体如下: 这是一款用LI无序列表创建的标准CSS菜单,这是国外一个网站的CSS制作教程,这里重新整理了一下,去除了广告代码, ...
web无序列表去掉点_无序列表ul标记的type属性值可以为-智慧树Web前端开发技术（山东联盟）章节答案...
Web前端开发技术(山东联盟):无序列表ul标记的type属性值可以为[多选题] A:square B:circle C:disc D:line Web前端开发技术(山东联盟)章节测试答案: squa ...
html列表黑色圆点是有序还是,网页HTML有序列表ol和无序列表ul
html语言中有序列表和无序列表有什么区别? 第一,有序列表的标签是 ,有start属性 ,最大序号为999 无序列表的标签是,无start属性第二,的显示方式是列表前面有序号(序号形式由type属 ...
html怎样让列表向下移动,Html无序列表ul控件实现行上下移动.
new document // 创建一个ul var ul = document.createElement("ul"); ul.id = "oList"; / ...
phpul 无序列表,PHP – 简单嵌套无序列表(UL)数组
我在stackoverflow上看到了这个嵌套的UL数组问题的一些变体,但我认为我的比其他更简单.我正在寻找一个简单的数组循环,允许无限量的主题(父母)与无限量的项目(儿童),如: Topic Ite ...
使用HTML5 nav标签和无序列表ul标签实现导航栏
<!doctype html> <html> <dead> <meta charset="UTF-8"> <style typ ...
HTML的无序（ul）、有序（ol）、定义（dl）列表标签
*列表标签列表类型标记符号备注无序列表 <ul>-</ul> 常用菜单列表 <menu>-</menu> 不常用目录列表 <dir&g ...
无序列表如何做一个导航条?html,如何使用无序列表制作导航菜单.docx
第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是: 首页产品介绍服务介绍技术支持立刻购买联系我们第二步:隐藏li的默认样式因为看起来不是很好看,菜单通常都不需要 ...
html生成无序列表,HTML的ul无序列表
无序列表 ul{width:250px;height:150px;background-color:gray;border:1px solid white;border-radius:10px;} u ...

使用无序列表ul实现多级菜单

使用无序列表ul实现多级菜单相关推荐

最新文章

热门文章