如何用ul+li的嵌套实现多级菜单效果？

linanir77 2015-04-11 08:31:36
我想要用ul+li实现多级动态菜单，可以灵活添加元素和删除元素。
预期的效果如下：（图中的线是我画的，帮助理解各元素关系的，实际页面中不需要。）


但是现实的效果惨不忍睹，添加元素功能实现了，但是排版是乱的，完全看不出来逻辑关系
截图如下：


代码如下：
<!DOCTYPE html>
<style type="text/css">
ul {
padding: 0;
margin: 0;
height: auto;
position: relative;
display: block;
border:2px solid;
border-radius:10px;
-moz-border-radius:10px; /* Old Firefox */

}
li {
display: block;
padding: 10px;
padding-left: 20px;
margin: 0;
border: 0px;
height: auto;
min-height: 25px;
position: relative;
width: auto;
vertical-align: middle;
white-space:nowrap;
display:compact

}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>

<body>
<div style="float:left;position:relative; width: 100%; height: 100%; min-width: 50px; background-color: Gray;">
<ul id="designul_1_1">
<li id="li_1_1" name="designul_1_1">
工程名称：
<input type="text" id="projectname_1_1" /></li>
<li id="li_1_2" name="designul_1_1">
项目名称：<input type="text" id="subname_1_1" /><ul id="designul_2_1" name="li_1_2"><li id="li_2_1" name="designul_2_1">子项名称：<input type="text" id="subname_2_1" name="subname_1_1" />
</li>
<li id="li_2_2" name="designul_2_1">
<input type="button" id="add_2_1" name="li_2_3" value="添加下级节点" onclick="add(this)" />
<input type="button" id="reduce_2_1" name="li_2_3" value="删除下级节点" onclick="reduce(this)" />
</li>
</ul>
</li>
<li id="li_1_3">
<input type="button" id="add_1_1" name="li_1_3" value="添加下级节点" onclick="add(this)" /><input type="button" id="reduce_1_1" name="li_1_3" value="删除下级节点" onclick="reduce(this)" />
</li>
</ul>
</div>

</body>

</html>
<script type="text/javascript">

function reduce(obj)
{
alert("reduce")
}

function add(obj){
var a=obj.parentNode.id.split("_");
var targetobj=obj.parentNode.previousSibling;
while (targetobj.nodeType!=1)
{
targetobj=targetobj.previousSibling;
}
var parentinput=targetobj.firstChild
while (parentinput.nodeType!=1)
{
parentinput=parentinput.nextSibling;
}
var lastelement=targetobj.lastChild
while (lastelement.nodeType!=1)
{
lastelement=lastelement.previousSibling;
}
var b=lastelement.id.split("_");
if (b[0]="designul"){temp=parseInt(b[2])+1}else{temp=1}
var c=obj.parentNode.parentNode.id.split("_");
var temp;
var createul=document.createElement("ul");
createul.id=c[0]+"_"+(parseInt(c[1])+1)+"_"+temp;
createul.name=targetobj.id;
targetobj.appendChild(createul);
lastelement=lastelement.nextSibling ;
while (lastelement.nodeType!=1)
{
lastelement=lastelement.nextSibling;
}
var createli;
var d=lastelement.id.split("_");
temp=(parseInt(d[2])-1)*2;
for (var i=1;i<3;i++)
{
createli=document.createElement("li");
createli.id="li_"+d[1]+"_"+(parseInt(temp)+i)
createli.name=lastelement.id;
lastelement.appendChild(createli);
switch (i)
{
case i=1:
var createinput=document.createElement("input");
createinput.id="input_"+createul.id.split("_")[1]+"_"+createul.id.split("_")[2];
createinput.name =parentinput.id;
createinput.type ="text" ;
createinput.value=createinput.id+"+"+createinput.name;
createli.innerHTML="子项名称：";
createli.appendChild(createinput);
break;
case i=2:
var createbutton=document.createElement("input");
createbutton.id="add_"+createul.id.split("_")[1]+"_"+createli.id.split("_")[2];
createbutton.name=createli.id;
createbutton.type="button";
createbutton.value="添加下级节点";
createbutton.onclick=function(){add(this);};
createli.appendChild(createbutton);
createbutton=document.createElement("input");
createbutton.id="reduce_"+createul.id.split("_")[1]+"_"+createli.id.split("_")[2];
createbutton.name=createli.id
createbutton.type="button"
createbutton.value="删除下级节点"
createbutton.onclick=function(){reduce(this);};
createli.appendChild(createbutton);
break;
}
}
}
</script>

谁能告诉我如何实现？谢谢了。
...全文
897 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2015-04-12
  • 打赏
  • 举报
 回复 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面名称</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
height: auto;
position: relative;
display: block;
border:2px solid;
border-radius:10px;
-moz-border-radius:10px; /* Old Firefox */
float: left;
}
li {
display: block;
padding: 10px;
padding-left: 20px;
margin: 0;
border: 0px;
height: auto;
min-height: 25px;
position: relative;
width: auto;
vertical-align: middle;
white-space:nowrap;
clear: left;
}
li input {
	float: left;
	width: 60px;
}
li .add {
	width: 56px;
}
li .del {
	width: 40px;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<ul class="head">
	<li><input type="text" name="a" value="a" class="txt" /><input type="button" value="添加子" class="add" data-n="0" /></li>
</ul>
<script type="text/javascript">

$(".head").on("click", ".add", function(event){
	var ul = $(this).parent().children("ul");
	if (ul.length==0)
		ul = $("<ul>").appendTo($(this).parent());
	var nn = parseInt($(this).data("n"), 10)+1;
	$(this).data("n",nn);
	var n = $(this).parent().children(".txt").attr("name")+"_"+nn;
	ul.append('<li><input type="text" name="'+n+'" value="'+n+'" class="txt" /><input type="button" value="删除" class="del" /><input type="button" value="添加子" class="add" data-n="0" /></li>');
}).on("click", ".del", function(event){
	if ($(this).parent().parent().children("li").length<=1)
		$(this).parent().parent().remove();
	else
		$(this).parent().remove();
});
</script>
</body>
</html>
linanir77 2015-04-11
  • 打赏
  • 举报
 回复
引用 1 楼 jslang 的回复:
[/code]

非常感谢，你的代码很简单呀，原来都不知道还可以这么写，不过我的代码中每一个新加入的input的id和name都是用来体现结构关系的，比如说，所有input的name都是上一级input的id，这样通过name就能找到下级的所有input，id也是，都是按“类型_层级_序号”这种关系命名的。
你的代码实现的效果跟我现在的差不多，多加入几个层级后，画面会看着很乱，逻辑关系就不清楚了，我想实现下图的效果，不知道有没有什么办法，如果你知道能说一下吗？我好像每个帖子只能回复3次，所以连话也不敢多说。
如图：
天际的海浪 2015-04-11
  • 打赏
  • 举报
 回复 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面名称</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
height: auto;
position: relative;
display: block;
border:2px solid;
border-radius:10px;
-moz-border-radius:10px; /* Old Firefox */

}
li {
display: block;
padding: 10px;
padding-left: 20px;
margin: 0;
border: 0px;
height: auto;
min-height: 25px;
position: relative;
width: auto;
vertical-align: middle;
white-space:nowrap;
display:compact

}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<ul class="head">
	<li><input type="text" /><input type="button" value="添加子节点" class="add" /></li>
</ul>
<script type="text/javascript">

$(".head").on("click", ".add", function(event){
	var ul = $(this).parent().children("ul");
	if (ul.length==0)
		ul = $("<ul>").appendTo($(this).parent());
	ul.append('<li><input type="text" /><input type="button" value="删除" class="del" /><input type="button" value="添加子节点" class="add" /></li>');
}).on("click", ".del", function(event){
	$(this).parent().remove();
});
</script>
</body>
</html>
jQuery实现带动画效果的多级下拉菜单代码
本文实例讲述了jQuery实现带动画效果的多级下拉菜单代码。分享给大家供大家参考。具体如下： 这是一款基于jQuery实现的多级下拉菜单，带动画效果，所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套，代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-animate-style-down-show-menu-codes/ 具体代码如下： &lt;!DOCTYPE html PUB
XML+XSL树形菜单
这是一个用XML+XSL生成一个灵活的树形菜单。其中用li和ul嵌套进行菜单的展示，用js控制子菜单的隐藏和显示,css来控制样式,xml文件用来存放菜单的内容。如果要生成多级菜单可以修改xml文件,将item节点下的name改为所要添加子菜单的名称，然后修改xsl文件。
VUE实现Xmall商城全栈开发_下
本项目是集vue2.6+vuex+vue- router+Element Ul+ES6+webpack+axios+Nodejs等技术栈打造的一款商城项目。内容包含:项目需求分析、首页组件和商品组件模块显示、用户模块显示、Token+JWT登录流程、购物车商品操作等功能。本项目以实战项目为切入点，模拟公司Vue项目研发流程，从头到尾讲解项目功能实现和优化、打包上线流程等，帮助提高你的技术层级，突破技术瓶颈。
纯css无限级导航
一个用纯css做的无限极导航，只有一个页面，简单，简洁，演示里面已经添加到9级菜单导航，还可增加更多，但是子导航靠左还是靠右是要手动添加css样式控制。各级菜单都可以随内容的长度自行适应宽度，而当浏览器分辨率较低时一级导航也可以自动换行，而多级子菜单靠左显示还是得手动调整。 DOM结构非常简单，只是 ul.nav 与 li.item 的互相嵌套而已。 看代码吧（长是长了点，但其实你会发现导航的标签结构真的真的很简单，重要的是CSS部分）其实css部分也超简单。
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章