js實(shí)現(xiàn)左側(cè)菜單欄遞歸循環(huán)遍歷

CoyPan 發(fā)布于2019-08-23 18:20 / 2668人閱讀

摘要：首先布局菜單首頁按鈕彈框通知提醒全局頁簽圖片畫廊輪播圖表單登錄注冊(cè)表格基礎(chǔ)表格高級(jí)表格富文本城市管理訂單管理訂單詳情結(jié)束訂單員工管理車輛地圖圖標(biāo)柱形圖餅圖折線圖權(quán)限設(shè)置邏輯最后樣式圖片描述沒有寫樣式簡(jiǎn)易版本的菜單欄

首先html布局

菜單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: "注冊(cè)",
                key: "/form/reg",
            }
        ]
    },
    {
        title: "表格",
        key: "/table",
        children: [
            {
                title: "基礎(chǔ)表格",
                key: "/table/basic",
            },
            {
                title: "高級(jí)表格",
                key: "/table/high",
            }
        ]
    },
    {
        title: "富文本",
        key: "/rich"
    },
    {
        title: "城市管理",
        key: "/city"
    },
    {
        title: "訂單管理",
        key: "/order",
        btnList: [
            {
                title: "訂單詳情",
                key: "detail"
            },
            {
                title: "結(jié)束訂單",
                key: "finish"
            }
        ]
    },
    {
        title: "員工管理",
        key: "/user"
    },
    {
        title: "車輛地圖",
        key: "/bikeMap"
    },
    {
        title: "圖標(biāo)",
        key: "/charts",
        children: [
            {
                title: "柱形圖",
                key: "/charts/bar"
            },
            {
                title: "餅圖",
                key: "/charts/pie"
            },
            {
                title: "折線圖",
                key: "/charts/line"
            },
        ]
    },
    {
        title: "權(quán)限設(shè)置",
        key: "/permission"
    },
];

js邏輯
var ul="";

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

沒有寫樣式簡(jiǎn)易版本的菜單欄