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

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

注意:一级菜单前面的icon的文件名称是其对应json文件中的navId值

 

正文结束!!!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lst0426

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值