时间戳

首页 > 解决方案 > HTML菜单的Javascript

javascript - HTML菜单的Javascript

问题描述

我有内部对象的多维数组及其导航菜单。我已经将该对象转换为 HTML 并且工作正常，但它是如此静态且下拉级别有限，在当前代码中我只做 2 级深度。

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'}]

var items = []
nav.map((val,id)=>{
    var item
        if(typeof val.sub!=='undefined'){
            var item1 = []
            var item_1
            val.sub.map((val,id)=>{
                if(typeof val.sub!=='undefined'){
                    var item2 = []
                    val.sub.map((val,id)=>{
                        item2.push('<li><a href="#">'+val.name+'</a></li>')
                    })
                    item_1 = '<li class="drop-down"><a href="#">'+val.name+'</a><ul>'+item2+'</ul></li>'
                }else{
                    item_1 = '<li><a href="#">'+val.name+'</a></li>'
                }
            item1.push(item_1)
            })
            item = '<li class="drop-down"><a href="#"></a><ul>'+item1+'</ul></li>'
        }else{
            item = '<li><a href="#">'+val.name+'</a></li>'
        }
    items.push(item)
})

console.log(items)

好吧，如果我有 5 级或更多级的下拉菜单怎么办？

[{ 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'}]

这将是一项艰巨的任务，并变成丑陋的代码行。这个问题有什么解决办法吗？如果可能的话，递归解决方案会更好，因为我认为它更有效。谢谢。

标签： javascripthtmlmultidimensional-array

解决方案

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

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 --

<body>
  <ul id="test"></ul>
</body>

-- JS --

function r(data, target) {
  data.forEach(el => {
    target.insertAdjacentHTML("beforeend", "<li>" + el.name + "</li>");
    if (el.sub) {
      const ul = document.createElement("ul");
      r(el.sub, ul)
      target.lastElementChild.insertAdjacentElement("beforeend", ul);
    }
  })
}


let test = document.getElementById('test')
r(datas, test)

好吧，让你在'ul'中挣扎，我感觉很糟糕。

这是一个工作版本。

推荐阅读