js控制json生成菜单——自制菜单

用户3519280

发布于 2023-07-08 10:42:13

33200

代码可运行

文章被收录于专栏：c++ 学习分享c++ 学习分享

运行总次数：0

代码可运行

js控制json生成菜单——自制菜单（一）

此文档解决以下问题：

1.JSON文件的书写方式

2.jQuery.getJSON()的运用

3.jQuery.each()的运用

4.jQuery的DOM 操作方法之一：.append()的运用

5.jQuery的遍历方法之一：.children()的运用

6.jQuery的遍历方法之一：.siblings()的运用

7.jQuery的绑定事件处理器之一：.on()的运用

8.jQuery的滑动特效:.slideToggle()、.slideUp()、.slideDown()的运用

附：阿里巴巴矢量图标库http://www.iconfont.cn/

最终效果：

1.navtab.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>利用jq和json生成菜单</title>
        <link type="text/css" rel="stylesheet" href="css/navtab.css" />
        <script src="js/jquery_3.3.1_jquery.min.js"></script>
        <script src="js/navtab.js"></script>
    </head>

    <body>

        <div id="nav_box">
            <ul id="nav-mainbox">
                <li class="nav_head">
                    <span class="shead"><img src="img/nav/home.png"/></span>
                    <a href="#">首页</a>
                    <span class="sfoot"><img src=""/></span>
                </li>
            </ul>
        </div>

    </body>

</html>

2.nav.json

[

    {

        "navId": 1,

        "navTitle": "一级菜单1",

        "navUrl": "test.html",

        "navParentId": 0

    }, {

        "navId": 2,

        "navTitle": "一级菜单2",

        "navUrl": "test.html",

        "navParentId": 0

    }, {

        "navId": 3,

        "navTitle": "一级菜单1子1",

        "navUrl": "test.html",

        "navParentId": 1

    }, {

        "navId": 4,

        "navTitle": "一级菜单1子2",

        "navUrl": "test.html",

        "navParentId": 1

    }, {

        "navId": 5,

        "navTitle": "一级菜单3",

        "navUrl": "test.html",

        "navParentId": 0

    }, {

        "navId": 6,

        "navTitle": "一级菜单2子1",

        "navUrl": "test.html",

        "navParentId": 2

    }, {

        "navId": 7,

        "navTitle": "一级菜单3子1",

        "navUrl": "test.html",

        "navParentId": 5

    }, {

        "navId": 8,

        "navTitle": "一级菜单2子2",

        "navUrl": "test.html",

        "navParentId": 2

    }, {

        "navId": 9,

        "navTitle": "一级菜单4",

        "navUrl": "test.html",

        "navParentId": 0

    }, {

        "navId": 10,

        "navTitle": "一级菜单4子1",

        "navUrl": "test.html",

        "navParentId": 9

    }

]

1 $(function() {3.navtab.js

$(function() {
    $.getJSON("json/nav.json", function(data) {
        //1.getJSON方法获取json文件数据，data为json存储的数据对象组
        for(var i = 0; i < data.length; i++) {
            //2.循环访问data数组中的每个对象，长度为data.length
            $.each(data[i], function(key, val) {
                //3.遍历每个data对象的键值对，遍历次数为3，原因json文件有3个键值对
                //key代表属性名，val代表对应的属性值
                if(data[i][key] == 0) {
                    //4.判断该data对象是否存在菜单的父级菜单id为0
                    //为0 则为一级菜单，生成li标签，显示菜单项名称data[i]["navTitle"]
                    //同时添加li的class为data[i]["navId"]
                    $("#nav-mainbox").append("<li class='" + data[i]["navId"] + "'><span class='shead'><img src='img/nav/" + data[i]["navId"] + ".png'/></span><a>" + data[i]["navTitle"] + "</a><span class='sfoot'><img src='img/nav/icon_caret_down_g.png'/></span><ul></ul></li>");

                    //7.页面首次加载时，只有第一项一级菜单的子菜单显示
                    //其他子菜单项隐藏
                    $("li.1").children("ul").slideDown();
                    $("li.1").siblings().children("ul").slideUp();

                    //6.为一级菜单绑定点击事件
                    //一级菜单项可以滑动显示或隐藏子菜单项
                    //同时，当前菜单显示，则其他都隐藏
                    $("." + data[i]["navId"]).on("click", function() {
                        $(this).children("ul").slideToggle();
                        $(this).siblings().children("ul").slideUp();
                    })

                }

                if(data[i][key] == i + 1) {
                    //5.判断非一级菜单项
                    //根据该对象的父级菜单id找li标签，成为其子菜单项
                    $("." + data[i]["navParentId"]).find("ul").append("<li class='" + data[i]["navId"] + "'><a href='" + data[i]["navUrl"] + "'>" + data[i]["navTitle"] + "</a></li>");
                }
            });

        }
    })
});

4.navtab.css

body {
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
    font-size: 16px;
}

ul,
li {
    list-style: none;
}

a,
a:hover,
a:active,
a:link {
    text-decoration: none;
    color: #3d3d3d;
}

#nav_box {
    width: 220px;
    height: 100%;

}

#nav_box #nav-mainbox {
    padding: 0;

}

#nav-mainbox li {
    background-color: #f2f2f2;
    color: #333;
    font-size: 14px;
    position: relative;
    line-height: 44px;
    cursor: pointer;
    border-bottom: 1px solid #dedede;
    border-right: 1px solid #dedede;

}
#nav-mainbox li:hover{
    background-color: #ADADAD;
}
.shead{
    position: relative;
    width: 40px;
    height: 40px;
    top: 10px;
    padding: 10px;

}
.sfoot{
    position: relative;
    width: 40px;
    height: 40px;
    margin-left: 70px;

}

#nav-mainbox li ul{
    padding: 0;
}

#nav-mainbox li ul li {
    position: relative;
    padding-left: 70px;
    background-color: white;
    border-bottom: 1px solid #dedede;
    border-right: 1px solid #dedede;
}
#nav-mainbox li ul li:hover{
    background-color: #ccc;
}