js 动态下拉菜单前端左侧动态下拉菜单

最新推荐文章于 2024-04-02 06:20:55 发布

破晓小v

最新推荐文章于 2024-04-02 06:20:55 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签：前端左侧动态导航下拉菜单动态导航下拉菜单

本文链接：https://blog.csdn.net/weixin_41983443/article/details/94717878

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

html代码：

<div id="menu" ></div>

js 代码：

var initmenu = function(dropdown,menudata) {
    var dropdown = $(dropdown);
    var i=0;
    function createNode(data) {

        var html ='<ul class="nav nav-tabs nav-stacked "id="'+i+'">';
        i++;

        for(var key in data) {

            if(data[key]["child"]) {

                html +='<li ><a target="myiframe"  style="color: #fbfbfb; " href="'+data[key]["link"]+'" onclick="'+data[key]["click"]+'" class="nav-header collapsed" data-toggle="collapse"><i class="'+data[key]["icon"]
                    +'"></i>&nbsp&nbsp<span>'+data[key]["name"]+'</span><span class="'+data[key]["icon1"]+'"></span>'+' </a>';//data-toggle="collapse"

                html += createNode(data[key]["child"]);

            } else {
                html +='<li><a target="myiframe" style="color: #fbfbfb" href="'+data[key]["link"]+'" onclick="displayModules(\''+data[key]["name"]+'\')"><i class="'+ data[key]["icon"]+'"></i>&nbsp&nbsp<span>'+data[key]["name"]+'</span></a>';

            }      dropdown.append('</li>');

        }

        html +='</ul>';

        return html;

    }
    var html = createNode(menudata);
    dropdown.append(html);
}
//后台数据
var menudata = {

    "id6":{name:"首页",link:"./main.html",icon:"glyphicon glyphicon-home"},
    "id4": {
        //多级
        //name: "组织结构管理", link: "#1",icon: "glyphicon glyphicon-th-large",
        name: "组织结构管理", link: "../orgStruManage/orgStruManage.html",icon: "glyphicon glyphicon-th-large",click:"orgShow('')",
        icon1:"pull-right glyphicon glyphicon-chevron-down",
        child: {

            "id5": {name: "单位管理", link: "https://www.baidu.com/"},

            "id6": {name: "部门管理", link: "link"},

         }

    },
    "id1":{name:"应用注册",link:"../systemRegist/systemRegist.html",icon:"glyphicon glyphicon-qrcode"},
    "id2":{name:"用户管理",link:"../userManage/userManage.html",icon: "glyphicon glyphicon-user"},
    "id5":{name:"模块管理",link:"../moduleManage/moduleManage.html",icon:"glyphicon glyphicon-menu-hamburger"},
    "id3":{name:"角色管理",link:"../roleManage/roleManage.html",icon:"glyphicon glyphicon-credit-card"},

};
//从后台获取数据函数调用
initmenu("#menu",menudata);

var initmenu = function(dropdown,menudata) {
var dropdown = $(dropdown);
var i=0;
function createNode(data) {

    var html ='<ul class="nav nav-tabs nav-stacked "id="'+i+'">';
    i++;

    for(var key in data) {

        if(data[key]["child"]) {

            html +='<li ><a target="myiframe"  style="color: #fbfbfb; " href="'+data[key]["link"]+'" onclick="'+data[key]["click"]+'" class="nav-header collapsed" data-toggle="collapse"><i class="'+data[key]["icon"]
                +'"></i>&nbsp&nbsp<span>'+data[key]["name"]+'</span><span class="'+data[key]["icon1"]+'"></span>'+' </a>';//data-toggle="collapse"

            html += createNode(data[key]["child"]);

        } else {
            html +='<li><a target="myiframe" style="color: #fbfbfb" href="'+data[key]["link"]+'" onclick="displayModules(\''+data[key]["name"]+'\')"><i class="'+ data[key]["icon"]+'"></i>&nbsp&nbsp<span>'+data[key]["name"]+'</span></a>';

        }      dropdown.append('</li>');

    }

    html +='</ul>';

    return html;

}
var html = createNode(menudata);
dropdown.append(html);

}
//后台数据
var menudata = {

"id6":{name:"首页",link:"./main.html",icon:"glyphicon glyphicon-home"},
"id4": {
    //多级
    //name: "组织结构管理", link: "#1",icon: "glyphicon glyphicon-th-large",
    name: "组织结构管理", link: "../orgStruManage/orgStruManage.html",icon: "glyphicon glyphicon-th-large",click:"orgShow('')",
    icon1:"pull-right glyphicon glyphicon-chevron-down",
    child: {

        "id5": {name: "单位管理", link: "https://www.baidu.com/"},

        "id6": {name: "部门管理", link: "link"},

     }

},
"id1":{name:"应用注册",link:"../systemRegist/systemRegist.html",icon:"glyphicon glyphicon-qrcode"},
"id2":{name:"用户管理",link:"../userManage/userManage.html",icon: "glyphicon glyphicon-user"},
"id5":{name:"模块管理",link:"../moduleManage/moduleManage.html",icon:"glyphicon glyphicon-menu-hamburger"},
"id3":{name:"角色管理",link:"../roleManage/roleManage.html",icon:"glyphicon glyphicon-credit-card"},

};
//从后台获取数据函数调用
initmenu("#menu",menudata);