如何用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>

谁能告诉我如何实现？谢谢了。
...全文
936 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>
css+ul设计的多级导航菜单
在多级导航菜单中，我们可以利用嵌套的`<ul>`来构建层级结构。例如： ```html <ul class="menu"> <li>菜单1 <ul> <li>子菜单1.1</a></li> <li>子菜单1.2</a></li> </ul> </li> <li>菜单2</a></li> </ul> ```...
jquery实现ul_li菜单展开收起效果
`jQuery`作为一种强大的JavaScript库，提供了简洁的API，使得实现`ul_li`菜单的展开收起效果变得非常简便。这个效果常用于创建多级导航菜单，通过点击某个父级菜单项来展开或收起其子菜单项，提高用户体验。 首先，...
css+js实现左侧多级菜单，可扩展图标及导航图片
- 用HTML构建菜单结构：通常使用ul和li元素创建多级列表，使用嵌套的li表示层级关系。 - CSS实现静态样式：为菜单项设置基础样式，如背景色、字体、边距等，同时设定子菜单的初始隐藏状态。 - JS响应式交互：监听...
纯CSS UL LI下拉式菜单特效.rar
总的来说，“纯CSS UL LI下拉式菜单特效”是一种实用的网页设计技巧，它展示了CSS的强大能力，可以在不依赖JavaScript的情况下实现动态交互效果。通过理解和应用这些技术，开发者能够创建出既美观又功能强大的导航...
css中使用ul li ul li ul li ul li 实现四层级联菜单
在实现过程中，我们会用到HTML的无序列表（ul）和列表项（li）标签来构建菜单的层级结构，并通过CSS来控制这些菜单项的显示与隐藏，以及交互效果。 首先，我们来理解HTML结构。在这里，我们使用了嵌套的ul和li标签...
CSS

61,124

社区成员

60,712

社区内容

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

加载中

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

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

+ 用AI写文章