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
}
]
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生成菜单——自制菜单（一）的更多相关文章
- 在jsp中使用jstl，不使用JS，实现递归，生成N级菜单
参考材料: http://blog.csdn.net/kimsoft/article/details/7801564 我的实现: 1.我的recursionMenu.jsp代码如下: <%@ ...
- 基于MVC4+EasyUI的Web开发框架经验总结（3）- 使用Json实体类构建菜单数据
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- 使用Json实体类构建菜单数据
基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框 ...
- 巨蟒django之权限7:动态生成一级&&二级菜单
内容回顾: . 权限的控制 . 表结构设计 存权限的信息 用户表 - name 用户名 - pwd 密码 - roles 多对多 角色表 - name - permissions 多对多 权限表 - ...
- （转）基于MVC4+EasyUI的Web开发框架经验总结（3）- 使用Json实体类构建菜单数据
http://www.cnblogs.com/wuhuacong/p/3669708.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
- js面向对象封装级联下拉菜单列表
本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素.点击文本框后,显示一级菜单.如果菜单中包含子菜单,菜单右侧会有指示箭头.点击菜单之后,会再显示下一级菜单,以此类推.当菜单下无子菜单时, ...
- 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单拖放控制
jQuery EasyUI 树形菜单 - 树形菜单拖放控制 当在一个应用中使用树(Tree)插件,拖拽(drag)和放置(drop)功能要求允许用户改变节点位置.启用拖拽(drag)和放置(drop) ...
- JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
- php生成json和js解析json
php生成json $value=array("name"=>"dfas");echo json_encode($value); js解析json var ...
随机推荐
- Project Euler Problem7
10001st prime Problem 7 By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see t ...
- hping网络安全工具的安装及使用
hping是用于生成和解析TCPIP协议数据包的开源工具.创作者是Salvatore Sanfilippo.目前最新版是hping3,支持使用tcl脚本自动化地调用其API.hping是安全审计.防火 ...
- sklearn调参（验证曲线，可视化不同参数下交叉验证得分）
一 . 原始方法: 思路: 1. 参数从 0+∞ 的一个 区间 取点, 方法如: np.logspace(-10, 0, 10) , np.logspace(-6, -1, 5) 2. 循环调用cr ...
- LeetCode（42）：接雨水
Hard! 题目描述: 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度 ...
- java 类型转换前先做检查
1.传统的类型转换由RTTI确保正确性. 2.instanceof关键字(二元操作符) ,返回一个Boolean值,告诉我们对象是不是某个类或该类派生类的实例,他判断的是类型. if (a insta ...
- zoj3469 区间dp好题
/* 按坐标排序 以餐厅为起点向两边扩展区间 dp[i][j][0]表示送完区间[i,j]的饭后停留在左边的代价 dp[i][j][1]表示送完区间[i,j]的饭后停留在右边的代价 */ #inclu ...
- 优化MVC，实现数据库表的记录的添加、删除、修改、查询。
一.在UserDAO里面重写实体user要调用的方法: 1.查询所有user表中的记录.用getAllUser()方法得到List public class UserDAO { public List ...
- python 全栈开发，Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv)
一.上传文件 上传一个图片 使用input type="file",来上传一个文件.注意:form表单必须添加属性enctype="multipart/form-data ...
- 20155309南皓芯 网络对抗《网络攻防》 Exp1 PC平台逆向破解(5)M
实践目标 本次实践的对象是linux的可执行文件 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShell,会返回一个可 ...
- JQuery中的工具类（五）
一:1.serialize()序列表表格内容为字符串.返回值jQuery示例序列表表格内容为字符串,用于 Ajax 请求. HTML 代码:<p id="results"&g ...