Heim > Artikel > Web-Frontend > 如何用ul+li的嵌套实现多级菜单效果？_html/css_WEB-ITnose
如何用ul+li的嵌套实现多级菜单效果？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:211827Durchsuche
我想要用ul+li实现多级动态菜单，可以灵活添加元素和删除元素。
预期的效果如下：（图中的线是我画的，帮助理解各元素关系的，实际页面中不需要。）
但是现实的效果惨不忍睹，添加元素功能实现了，但是排版是乱的，完全看不出来逻辑关系
截图如下：
代码如下：
nbsp;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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：html中设置滚动条的样式_html/css_WEB-ITnoseNächster Artikel：Html 块级元素和行级元素_html/css_WEB-ITnose