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 ...
随机推荐
- tomcat配置文件context.xml和server.xml分析
在tomcat 5.5之前Context体现在/conf/server.xml中的Host里的<Context>元素,它由Context接口定义.每个<Context元素代表了运行在 ...
- 在window是下安装hadoop过程
详细见http://www.cnblogs.com/kinglau/archive/2013/08/20/3270160.html
- Ex 5_22 在此我们基于以下性质给出一个新的最小生成树算法..._第九次作业
(a)设环的顶点集为V, e(u,v)为权最重的边,若把V分成两部分V1,V2.其中V1包含u,V2包含v,因为V是一个环,因此,至少存在两条把u和v连接起来的边.因此,除了e之外,至少还存在另一条边 ...
- 使用 CSS overscroll-behavior 控制滚动行为：自定义下拉刷新和溢出效果
CSS 的新属性 overscroll-behavior 允许开发者覆盖默认的浏览器滚动行为,一般用在滚动到顶部或者底部. 背景 滚动边界和滚动链接(boundary & chaining) ...
- 瞅瞅！！免费看VIP视频的技巧
最近再逛强大的知乎,发现一个免费看VIP视频的方法(腾讯是可能有点不稳定) 以爱奇艺为例: 复制URL到www.a6a6.org 把地址输入到输入框,点击开始 然后会提示你输入提取码 输入:22336 ...
- shell expect权威指南和实战
一.概述 我们通过Shell可以实现简单的控制流功能,如:循环.判断等.但是对于需要交互的场合则必须通过人工来干预,有时候我们可能会需要实现和交互程序如telnet服务器等进行交互的功能.而expec ...
- mace
作者:十岁的小男孩 QQ:929994365 心之安处即是吾乡. 本文主要的方向是终端移植.其主要又分两个小方向,理论和实践,即模型优化和模型移植.下文为前期写的,较为潦草,现在基本框架思路已经搭起来 ...
- Laravel 返回数据库中的随机一行数据
最佳方式 $total = Book::count() - 1; $skip = mt_rand(0, $total); $item = Book::select('name', 'author_id ...
- django----重定向
urlpatterns = [ re_path(r'^(\w+)(\w+)/$',views.index,name="index"), ] 1.<a href="{ ...
- 使用siege执行压力测试
没有安装siege? 可参考我的另一篇博客 使用siege执行压力测试笔记 场景分析 使用siege对https://www.baidu.com/进行加压. 要求 模拟20个用户同时访问 一共跑3个循 ...