我想要用ul+li实现多级动态菜单，可以灵活添加元素和删除元素。
预期的效果如下：（图中的线是我画的，帮助理解各元素关系的，实际页面中不需要。）
但是现实的效果惨不忍睹，添加元素功能实现了，但是排版是乱的，完全看不出来逻辑关系
截图如下：
代码如下：
html>
-
工程名称：
-
项目名称：- 子项名称：
-
- 子项名称：
-
<script> <br> <br> function reduce(obj) <br> { <br> alert("reduce") <br> } <br> <br> function add(obj){ <br> var a=obj.parentNode.id.split("_"); <br> var targetobj=obj.parentNode.previousSibling; <br> while (targetobj.nodeType!=1) <br> { <br> targetobj=targetobj.previousSibling; <br> } <br> var parentinput=targetobj.firstChild <br> while (parentinput.nodeType!=1) <br> { <br> parentinput=parentinput.nextSibling; <br> } <br> var lastelement=targetobj.lastChild <br> while (lastelement.nodeType!=1) <br> { <br> lastelement=lastelement.previousSibling; <br> } <br> var b=lastelement.id.split("_"); <br> if (b[0]="designul"){temp=parseInt(b[2])+1}else{temp=1} <br> var c=obj.parentNode.parentNode.id.split("_"); <br> var temp; <br> var createul=document.createElement("ul"); <br> createul.id=c[0]+"_"+(parseInt(c[1])+1)+"_"+temp; <br> createul.name=targetobj.id; <br> targetobj.appendChild(createul); <br> lastelement=lastelement.nextSibling ; <br> while (lastelement.nodeType!=1) <br> { <br> lastelement=lastelement.nextSibling; <br> } <br> var createli; <br> var d=lastelement.id.split("_"); <br> temp=(parseInt(d[2])-1)*2; <br> for (var i=1;i<3;i++) <br> { <br> createli=document.createElement("li"); <br> createli.id="li_"+d[1]+"_"+(parseInt(temp)+i) <br> createli.name=lastelement.id; <br> lastelement.appendChild(createli); <br> switch (i) <br> { <br> case i=1: <br> var createinput=document.createElement("input"); <br> createinput.id="input_"+createul.id.split("_")[1]+"_"+createul.id.split("_")[2]; <br> createinput.name =parentinput.id; <br> createinput.type ="text" ; <br> createinput.value=createinput.id+"+"+createinput.name; <br> createli.innerHTML="子项名称："; <br> createli.appendChild(createinput); <br> break; <br> case i=2: <br> var createbutton=document.createElement("input"); <br> createbutton.id="add_"+createul.id.split("_")[1]+"_"+createli.id.split("_")[2]; <br> createbutton.name=createli.id; <br> createbutton.type="button"; <br> createbutton.value="添加下级节点"; <br> createbutton.onclick=function(){add(this);}; <br> createli.appendChild(createbutton); <br> createbutton=document.createElement("input"); <br> createbutton.id="reduce_"+createul.id.split("_")[1]+"_"+createli.id.split("_")[2]; <br> createbutton.name=createli.id <br> createbutton.type="button" <br> createbutton.value="删除下级节点" <br> createbutton.onclick=function(){reduce(this);}; <br> createli.appendChild(createbutton); <br> break; <br> } <br> } <br> } <br> </script>
谁能告诉我如何实现？谢谢了。
回复讨论(解决方案)
<!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>
[/code]
非常感谢，你的代码很简单呀，原来都不知道还可以这么写，不过我的代码中每一个新加入的input的id和name都是用来体现结构关系的，比如说，所有input的name都是上一级input的id，这样通过name就能找到下级的所有input，id也是，都是按“类型_层级_序号”这种关系命名的。
你的代码实现的效果跟我现在的差不多，多加入几个层级后，画面会看着很乱，逻辑关系就不清楚了，我想实现下图的效果，不知道有没有什么办法，如果你知道能说一下吗？我好像每个帖子只能回复3次，所以连话也不敢多说。
如图：
<!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>
