此文档解决以下问题：

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

	}

]

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

     padding:;

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

 }

 #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:;

 }

 #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值

正文结束！！！！！

js控制json生成菜单——自制菜单（一）的更多相关文章

  1. 在jsp中使用jstl，不使用JS，实现递归，生成N级菜单

    参考材料:  http://blog.csdn.net/kimsoft/article/details/7801564 我的实现: 1.我的recursionMenu.jsp代码如下: <%@ ...

  2. 基于MVC4+EasyUI的Web开发框架经验总结（3）- 使用Json实体类构建菜单数据

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  3. 使用Json实体类构建菜单数据

    基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框 ...

  4. 巨蟒django之权限7:动态生成一级&&二级菜单

    内容回顾: . 权限的控制 . 表结构设计 存权限的信息 用户表 - name 用户名 - pwd 密码 - roles 多对多 角色表 - name - permissions 多对多 权限表 - ...

  5. （转）基于MVC4+EasyUI的Web开发框架经验总结（3）- 使用Json实体类构建菜单数据

    http://www.cnblogs.com/wuhuacong/p/3669708.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...

  6. js面向对象封装级联下拉菜单列表

    本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素.点击文本框后,显示一级菜单.如果菜单中包含子菜单,菜单右侧会有指示箭头.点击菜单之后,会再显示下一级菜单,以此类推.当菜单下无子菜单时, ...

  7. 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单拖放控制

    jQuery EasyUI 树形菜单 - 树形菜单拖放控制 当在一个应用中使用树(Tree)插件,拖拽(drag)和放置(drop)功能要求允许用户改变节点位置.启用拖拽(drag)和放置(drop) ...

  8. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  9. php生成json和js解析json

    php生成json $value=array("name"=>"dfas");echo json_encode($value); js解析json var ...

随机推荐

  1. LeetCode（6）：Z字形转换

    Medium! 题目描述: 将字符串 "PAYPALISHIRING" 以Z字形排列成给定的行数:(下面这样的形状) P A H N A P L S I I G Y I R 之后按 ...

  2. Guice 依赖绑定

    Guice 依赖绑定 连接绑定(Linked Bingdings) 连接绑定是 Guice 最基本的一种绑定方式.这种绑定方式我们需要在自己定义的 Module 的 configure() 中编写绑定 ...

  3. java 判断字符串什么编码类型

    public static String getEncoding(String str) { String encode = "GB2312"; try { if (str.equ ...

  4. php手动搭建wamp环境（一）--之 Windows系统下PHP环境搭建

    1.PHP环境搭建的前提是 Apache HTTP Server (Apache 服务器)已经安装部署成功,并可以正常访问到服务器的主页面.Apache HTTP Server 的安装部署已经在上一篇 ...

  5. C 几何水题 求不同斜率的数目 枚举+set

    Description Master LU 非常喜欢数学,现在有个问题:在二维空间上一共有n个点,LU每连接两个点,就会确定一条直线,对应有一个斜率.现在LU把平面内所有点中任意两点连线,得到的斜率放 ...

  6. [转] 理解 JavaScript 中的 Array.prototype.slice.apply(arguments)

    假如你是一个 JavaScript 开发者,你可能见到过 Array.prototype.slice.apply(arguments) 这样的用法,然后你会问,这么写是什么意思呢? 这个语法其实不难理 ...

  7. 2015 Benelux Algorithm Programming Contest I- Interesting Integers

    题目大意:给你一个数字n(n<=1e9) ,让你求一个能包含这个数的斐波那契数列的第一项a 和第二项b,找出b最小的那个. 帮我复习了一下扩展欧几里得.... 思路:a,b,a+b,a+2b…… ...

  8. 【Java】 剑指offer(44) 连续子数组的最大和

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 数字以0123456789101112131415…的格式序列化到 ...

  9. 【Java】 剑指offer(63) 股票的最大利润

      本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 假设把某股票的价格按照时间先后顺序存储在数组中,请问买卖交易该 ...

  10. 021 使用join()将数组转变为字符串

    1.定义用用法 join() 方法用于把数组中的所有元素放入一个字符串. 元素是通过指定的分隔符进行分隔的. 语法 arrayObject.join(separator) 返回值 返回一个字符串.该字 ...