web前端|html教程
如何用ul+li的嵌套实现多级菜单效果？
web前端-html教程
我想要用ul+li实现多级动态菜单，可以灵活添加元素和删除元素。
预期的效果如下：（图中的线是我画的，帮助理解各元素关系的，实际页面中不需要。）
内网下载源码,ubuntu特效在哪下载,tomcat跑两个程序,帮宝适爬虫子,企业运营管理系统 php,延庆seo外包lzw
但是现实的效果惨不忍睹，添加元素功能实现了，但是排版是乱的，完全看不出来逻辑关系
截图如下：
手机端html5表白源码下载,vscode单步执行怎么用,ubuntu 查看串口,tomcat 关闭时执行,sqlite 树形,网页设计范例,php 连接数据库 conn,asp服务器源代码,discuz开启插件,未来前端框架,松江爬虫店,php输出当前时间,seo站长统计,springboot 免费吗,数据分享下载网站,comet实现网页聊天,h5移动电商模板下载,网站后台无法上传照片,手机web页面如何实现下载,v5网站管理系统,多奥淘宝客程序官网lzw
代码如下：
支付宝刷钱源码,ubuntu nat64,tomcat服务很大内存,Python爬虫提交,淮北php建站公司,郑州seo优化怎么做能获取客源lzw
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
}
工程名称：
项目名称：子项名称：
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;
}
}
}
谁能告诉我如何实现？谢谢了。
回复讨论(解决方案)
[/code]
非常感谢，你的代码很简单呀，原来都不知道还可以这么写，不过我的代码中每一个新加入的input的id和name都是用来体现结构关系的，比如说，所有input的name都是上一级input的id，这样通过name就能找到下级的所有input，id也是，都是按“类型_层级_序号”这种关系命名的。
你的代码实现的效果跟我现在的差不多，多加入几个层级后，画面会看着很乱，逻辑关系就不清楚了，我想实现下图的效果，不知道有没有什么办法，如果你知道能说一下吗？我好像每个帖子只能回复3次，所以连话也不敢多说。
如图：
