Home > Article > Web Front-end > How to use ul li's nesting to achieve multi-level menu effect? _html/css_WEB-ITnose
How to use ul li's nesting to achieve multi-level menu effect? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:211825browse
我想要用ul+li实现多级动态菜单，可以灵活添加元素和删除元素。
预期的效果如下：（图中的线是我画的，帮助理解各元素关系的，实际页面中不需要。）
但是现实的效果惨不忍睹，添加元素功能实现了，但是排版是乱的，完全看不出来逻辑关系
截图如下：
代码如下：
76c82f278ac045591c9159d381de2c57
46d5fe1c7617e3914f214aaf043f4ccf
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
}
531ac245ce3e4fe3d50054a55f265927
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
819fb2bf1d90d739c86ad4c4d602aadb
6f1fb27ec8098bc0c52b45ea4afc6165
782de1c95e49d41549c2b7ae4ad3ce2f
工程名称：
34cd8e7253a022f98719aa02bf941099bed06894275b65c1ab86501b08a632eb
3158e7841dacc33addadf5ff960821d0
项目名称：498f05765b0935f933f76076a6674fef64427ed9e9edbf1414bf8d7780c2e53ed10a0c941c1a1edf761c9592e0674287子项名称：8bb2e5fe5f5e3f6f38a362ecf9b3b733
bed06894275b65c1ab86501b08a632eb
c6607438861b7be1eaec75c6ddd05dc1
dda8744c4eb7628bdf7b10b8a007c872
48f30bdbcd7f9728e76c33bee867b3f9
bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
482b4d528a4ec8239381834d525990bc
112211373ad4932a7ff799463078847278cd3a82d0e30b41f7fa4dc82ad955e0
bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
9bc988c8d379612a3b235e5490d962db
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;i0e79d72ab26fd48e33015db8317e33bb
谁能告诉我如何实现？谢谢了。
回复讨论(解决方案)
<!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>