多级下拉菜单怎么做,什么是交互式菜单

需要注意的是，核心多级菜单列表主要依靠递归，首先设置标志位，然后处理与以前不同。 部分注释代码为原始创意代码，只处理两个层，后续根据递归补充相应的代码。 请注意，html只能解析到h5，因此之后的样式不正确。 如果自己写的话，需要考虑这一点，避免直接用于开发环境。 doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 '/metaname=' viewport ' content=' width=device-width， initial-scale=1.0 '/title document/title style/style/headbodydivclass=' app ' id=' app '/div script /其中id是第几层let tree=[ { id: 1，Parentid:name: '一级菜单a '，rank: 1 }，{ id: 2，Parentid3360，name} rank:} name : '一级菜单c '，rank:}，{id:Parentid3360，name : '二级菜单{ id: 5，parentId: 1，name 3: Parentid:name : '二级菜单B-A '、Rame parentId: 4、name : '三级菜单A-A '、rank:}、{id:Parentid: Rantid parentId: 8、name : '五级菜单a-a-a-a-a '、rank:}、{ id: 10、Parentid:name : '六级菜单name: '七级菜单A-A-A-A '，rank:}、{ id: 12，parentId: 11，name 3360 '八级菜单a} { id: 13 name:'9级菜单a-a-a-a-a-a-a '，rank: 9 }，{ id: 14，parentid 3360 }//letapp=document.getelement //letcurrent=tree.filter((e )=e.rank===1)； //let father=[]； //current.foreach((item ) )/letH1=document.createelement ) ) H1 )； //h1.innerText=item.name； //H1.setattribute (，item.id )； //H1.setattribute('parentid '，item.parentId )； //father.push(H1； //； //father.map () e )={ //app.appendChild(e ) }； //； //current=tree.filter((e )=e.rank===2)； //current.foreach((item ) )/letH2=document.createelement ) ) H2 )； //h2.innerText=item.name； //H2.setattribute (，item.id )； //H2.setattribute('parentid '，item.parentId )； //for(letfatheritemoffather ) (//let current=father item.getattribute ) )标识； //if(current==item.parentid )//fatheritem.appendchild(H2 )； //} //} //}； /script script let flag=false； functioncreateelement(El=app，arr=tree，rank=1，len=0，father=[ ] ) ((e.e ) ) len =current.length； if(flag ) { let res=[]； current.foreach((item ) ) letH2=document.createelement ) ) h${rank} )； h2.innerText=item.name； H2.setattribute('id '，item.id )； H2.setattribute('parentid '，item.parentId )； RES.push(H2； for(letfatheritemoffather ) ) let current=father item.getattribute (' id ' )； if(current==item.parentid ) fatheritem.appendchild(H2 )； }}； 可以通过设定//RES的标志位，并在每次更新时复位father列表，来实现相应的逻辑，也可以根据father列表的长度，取消flag的标志位。 father=res； }else{current.foreach((item ) ) letH1=document.createelement ) ` h${rank} )； h1.innerText=item.name； H1.setattribute('id '，item.id )； H1.setattribute('parentid '，item.parentId )； father.push(H1； )； father.map () e )={ el.appendChild(e ) )； )； flag=true； (if ) lenARR.Length ) createelement ) El，arr，rank 1，len，father )； } } createElement (； /script /body/html