动态左侧二级下拉菜单基于bootstrap & js

最新推荐文章于 2021-12-31 18:14:48 发布

原创最新推荐文章于 2021-12-31 18:14:48 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#左侧动态二级下拉菜单 #bootstrap动态下拉菜单 #二级下拉菜单

前端专栏收录该内容

18 篇文章

订阅专栏

博客提供了二级下拉菜单的js代码，鼓励有疑问者留言讨论，博主会第一时间参与。

动态左侧二级下拉菜单

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/bootstrap.css" rel="stylesheet">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <title>左侧动态下拉菜单</title>
</head>
<body>
<div id="menu"style="width: 300px;background-color: #3285ff"></div>

js代码：

//初始化菜单的函数封装
    //全局变量
    var i=0;
    var initmenu = function(dropdown,menudata) {
        var dropdown = $(dropdown);

        function createNode(data) {

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

            for(var key in data) {

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

                    html +='<li ><a target="myiframe"  style="color: #fbfbfb; " href="#menuUl'+i+'"  class="nav-header collapsed" data-toggle="collapse" aria-expanded="false" ><i class="'+data[key]["icon"]
                        +'"></i>&nbsp&nbsp<span>'+data[key]["name"]+'</span><span class="pull-right glyphicon glyphicon-chevron-down"></span>'+' </a>';//data-toggle="collapse"

                    html += createChildNode(data[key]["children"]);

                } 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);
    };

    function createChildNode(data) {
        var html ='<ul class="nav nav-tabs nav-stacked collapse"id="menuUl'+i+'" aria-expanded="false">';
        i++;
        for(var key in data) {


                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></li>';

            }

        html +='</ul>';

        return html;
    }
    //后台数据

    var data = [
        {
            "children": [
                {
                    "name": "肥肉个人",
                    "link": "pooiummll.,hhhh",
                    "icon": "",
                    "modId": "448378509be111e9b059000c290ad930"
                },
                {
                    "name": "大家",
                    "link": "pooiummll.,kjgjrojr",
                    "icon": "",
                    "modId": "ea803f869baf11e9b059000c290ad930"
                }
            ],
            "name": "设置",
            "link": "pooiummll.,/",
            "icon": "",
            "modId": "1196d307940811e9b059000c290ad930"
        },
        {
            "name": "夫人og",
            "link": "fffffgreh",
            "icon": "",
            "modId": "4e8183b4988511e9b059000c290ad930"
        },
        {
            "name": "h6h",
            "link": "frg4gg6gt5t",
            "icon": "",
            "modId": "60e50697964a11e9b059000c290ad930"
        },
        {
            "name": "2图片设置",
            "link": "222gregjoijgi",
            "icon": "",
            "modId": "c796de129ec311e9b059000c290ad930"
        },
        {
            "name": "2新增图片设置",
            "link": "222f'r'g'j'go'i'j'o",
            "icon": "",
            "modId": "db503fcf9ec311e9b059000c290ad930"
        }
    ];
    initmenu("#menu",data);

如有疑问欢迎留言讨论，看到第一时间参与讨论。