我想要用ul+li实现多级动态菜单,可以灵活添加元素和删除元素。
预期的效果如下:(图中的线是我画的,帮助理解各元素关系的,实际页面中不需要。)
但是现实的效果惨不忍睹,添加元素功能实现了,但是排版是乱的,完全看不出来逻辑关系
截图如下:
代码如下:
<!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]
<!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>