HTML菜单的Javascript

我有一个多维数组，里面有对象，还有导航菜单。我已经将该对象转换为HTML，工作正常，但它是静态的，并且在下拉级别上受到限制，在当前代码中，我只做了两个级别的深度

var nav=[{name:'Home'，route:'Home'}，{name:'Portfolio'，route:'Portfolio'}，
{name:'Drop-Down'，sub:[{name:'Drop-Down 1'}，{name:'Drop-Down 2'，sub:[{name:'Deep-Drop-Down 1'}]}，{name:'Last'}]
变量项=[]
导航地图（（val，id）=>{
变量项
if（typeof val.sub！=“未定义”）{
var item1=[]
变量项_1
val.sub.map（（val，id）=>{
if（typeof val.sub！=“未定义”）{
var item2=[]
val.sub.map（（val，id）=>{
项目2.推送（“
”）
})
项目1='
'+item2+'
'
}否则{
项目1='
'
}
项目1.推送（项目1）
})
item='
'+item1+'
'
}否则{
项目=“
”
}
项目。推送（项目）
})
console.log（items）

是的，它可以通过递归函数轻松完成

const datas = [{ name: 'Home' },
{ name: 'Portfolio' },
{
  name: 'Drop Down', sub: [
    { name: 'Drop Down 1' },
    {
      name: 'Drop Down 2', sub: [
        { name: 'Deep Drop Down 2' },
        {
          name: 'Deep Drop Down 3', sub: [
            { name: 'Deep Deep Drop Down 1' },
            {
              name: 'Deep Deep Drop Down 2', sub: [
                { name: 'Deep Deep Deep Drop Down 1' }]
            }]
        }]
    }
  ]
},
{ name: 'Last' }]

--HTML--

--JS--

功能r（数据、目标）{
data.forEach（el=>{
target.insertAdjacentHTML（“beforeed”，“li>”+el.name+“”）；
如果（附属工程）{
const ul=document.createElement（“ul”）；
r（el.sub，ul）
target.lastElementChild.InsertAdjacElement（“beforeend”，ul）；
}
})
}
让test=document.getElementById（'test'））
r（数据、测试）

好吧，我很难过让你和ul打交道

---

这是一个有效的版本。

纯Javascript，但不将其作为通用函数

我对导航阵列做了一些更改

var-nav=[
{name:'Home'，route:'Home'}，
{name:'Portfolio'，route:'Portfolio'}，
{name:'Drop Down'，route:'/Drop'，sub:[
{name:'下拉列表1'，路由：'/1'}，
{name:'下拉列表2'，路由：'/2'，子节点：[
{name:'深下拉1'，路由：'/1'}
]
}] 
},
{name:'Last'}]；
const menu=document.querySelector（'ul'）；
用于（导航的r值）{
var BaseLi=document.createElement（'Li'）；
var routeTag=document.createElement（'a'）；
routeTag.href=“/”+r.route；
routeTag.innerText=r.name；
BaseLi.appendChild（routeTag）；
如果（r.sub）{
var子菜单=document.createElement（'ul'）；
对于（r.sub的var s）{
var SubLi=document.createElement（'Li'）；
var routeTag=document.createElement（'a'）；
routeTag.href=“/”+r.route+“/”+s.route；
routeTag.innerText=s.name；
子目录附录子目录（routeTag）
子菜单.appendChild（SubLi）；
}
BaseLi.appendChild（子菜单）；
如果（s.sub）{
var subnum2=document.createElement（'ul'）；
对于（s.sub的变量s2）{
var SubLi2=document.createElement（'Li'）；
var routeTag=document.createElement（'a'）；
routeTag.href=“/”+r.route+“/”+s.route+“/”+s2.route；
routeTag.innerText=s2.name；
SubLi2.appendChild（routeTag）
子菜单2.附加子菜单（子菜单2）；
} 
子项追加子项（子项2）；
}
}
menu.appendChild（BaseLi）；
}

---

递归函数调用怎么样？就像这样，你将子菜单嵌套多少次并不重要。这是一个工作示例：

const buildMenu = nav => {
    const items = [];
    nav.map((val, id) => {
        items.push(`<li><a href="#">${val.name}</a></li>`);
        if (val.sub) {
            // recursive function call
            const submenu = buildMenu(val.sub);
            items.push(submenu);
        }
    });
    // wrap with ul
    return ['<ul>', ...items, '</ul>']
}

console.log(buildMenu(nav));

const buildMenu=nav=>{
常量项=[]；
导航地图（（val，id）=>{
物品。推送（`
`）；
如果（val.sub）{
//递归函数调用
const子菜单=构建菜单（val.sub）；
项目推送（子菜单）；
}
});
//用ul包装
返回[“
”，…项“
”]
}
控制台日志（构建菜单（nav））；

返回

['<ul>',
    '<li><a href="#">Home</a></li>',
    '<li><a href="#">Portfolio</a></li>',
    '<li><a href="#">Drop Down</a></li>',
    [
        '<ul>',
        '<li><a href="#">Drop Down 1</a></li>',
        '<li><a href="#">Drop Down 2</a></li>',
        [
            '<ul>',
            '<li><a href="#">Deep Drop Down 2</a></li>',
            '<li><a href="#">Deep Drop Down 3</a></li>',
            [
                '<ul>',
                '<li><a href="#">Deep Deep Drop Down 1</a></li>',
                '<li><a href="#">Deep Deep Drop Down 2</a></li>',
                // [] and so on...
                '</ul>'
            ],
            '</ul>'
        ],
        '</ul>'
    ],
    '<li><a href="#">Last</a></li>',
'</ul>']

['
'，
“
”，
“
”，
“
”，
[
“
”，
“
”，
“
”，
[
“
”，
“
”，
“
”，
[
“
”，
“
”，
“
”，
//[]等等。。。
“
”
],
“
”
],
“
”
],
“
”，
“
”]

解决这一问题的UX解决方案是，接受功能已经超出了普通菜单应该完成的功能，并将所有选项显示为一个完整的页面模式。如果产品负责人需要额外的功能，您应该始终返回到第一步，以确定当前的设计解决方案是否仍然适用于该任务，或者您是否需要实施不同的解决方案。不久前，我有一个小项目，客户需要下拉菜单，但只有两个级别，这不是一项艰巨的任务。这个问题只是我的好奇心，我很高兴能在下面的答案的帮助下解决它。是的，这是一个很好的解决方法。我最近创建了一个包含webview的本机应用程序。主页有自己的菜单，隐藏在应用程序中，因此我用javascript为发送到应用程序的主页创建了一个菜单结构。因此，每次我们更新主页上的菜单时，应用程序都会自动更新。这很容易相处。：）我在你的代码中做了一些调整，它工作了，谢谢

const buildMenu = nav => {
    const items = [];
    nav.map((val, id) => {
        items.push(`<li><a href="#">${val.name}</a></li>`);
        if (val.sub) {
            // recursive function call
            const submenu = buildMenu(val.sub);
            items.push(submenu);
        }
    });
    // wrap with ul
    return ['<ul>', ...items, '</ul>']
}

console.log(buildMenu(nav));

['<ul>',
    '<li><a href="#">Home</a></li>',
    '<li><a href="#">Portfolio</a></li>',
    '<li><a href="#">Drop Down</a></li>',
    [
        '<ul>',
        '<li><a href="#">Drop Down 1</a></li>',
        '<li><a href="#">Drop Down 2</a></li>',
        [
            '<ul>',
            '<li><a href="#">Deep Drop Down 2</a></li>',
            '<li><a href="#">Deep Drop Down 3</a></li>',
            [
                '<ul>',
                '<li><a href="#">Deep Deep Drop Down 1</a></li>',
                '<li><a href="#">Deep Deep Drop Down 2</a></li>',
                // [] and so on...
                '</ul>'
            ],
            '</ul>'
        ],
        '</ul>'
    ],
    '<li><a href="#">Last</a></li>',
'</ul>']