js實現左側菜單欄遞歸循環遍歷

首先html佈局
<ul id="abc">

</ul>
菜單json
const menuList = [

{
        title: '首頁',
        key: '/home'
    },
    {
        title: 'UI',
        key: '/ui',
        children: [
            {
                title: '按鈕',
                key: '/ui/buttons',
            },
            {
                title: '彈框',
                key: '/ui/modals',
            },
            {
                title: 'Loading',
                key: '/ui/loadings',
            },
            {
                title: '通知提醒',
                key: '/ui/notification',
            },
            {
                title: '全局Message',
                key: '/ui/messages',
            },
            {
                title: 'Tab頁籤',
                key: '/ui/tabs',
            },
            {
                title: '圖片畫廊',
                key: '/ui/gallery',
            },
            {
                title: '輪播圖',
                key: '/ui/carousel',
            }
        ]
    },
    {
        title: '表單',
        key: '/form',
        children: [
            {
                title: '登陸',
                key: '/form/login',
            },
            {
                title: '註冊',
                key: '/form/reg',
            }
        ]
    },
    {
        title: '表格',
        key: '/table',
        children: [
            {
                title: '基礎表格',
                key: '/table/basic',
            },
            {
                title: '高級表格',
                key: '/table/high',
            }
        ]
    },
    {
        title: '富文本',
        key: '/rich'
    },
    {
        title: '城市管理',
        key: '/city'
    },
    {
        title: '訂單管理',
        key: '/order',
        btnList: [
            {
                title: '訂單詳情',
                key: 'detail'
            },
            {
                title: '結束訂單',
                key: 'finish'
            }
        ]
    },
    {
        title: '員工管理',
        key: '/user'
    },
    {
        title: '車輛地圖',
        key: '/bikeMap'
    },
    {
        title: '圖標',
        key: '/charts',
        children: [
            {
                title: '柱形圖',
                key: '/charts/bar'
            },
            {
                title: '餅圖',
                key: '/charts/pie'
            },
            {
                title: '折線圖',
                key: '/charts/line'
            },
        ]
    },
    {
        title: '權限設置',
        key: '/permission'
    },
];

js邏輯
var ul='';

function appednMenu(data) {
    data.forEach(function (item,index) {
        if(item.children){
            ul+='<li>'+item.title+'<ul>'
                    appednMenu(item.children);
            ul+='</ul></li>';
        }else {
            ul+='<li>'+item.title+'</li>'
        }
    })
}
appednMenu(menuList);
console.log(ul);
document.getElementById('abc').innerHTML=ul
最後樣式
![圖片描述][1]

沒有寫樣式 簡易版本的菜單欄