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 ...
随机推荐
- 【bzoj1901】dynamic ranking（带修改主席树）
传送门(权限) 传送门(非权限) 花了一晚上总算把代码调好了……才知道待修改主席树怎么操作…… 然而还是一知半解orz…… 先说说我的理解吧 我们一般建主席树的时候都是直接在序列上建的 但是如果有修改 ...
- gitlab代码仓库迁移
有的时候我们需要对gitlab上的代码进行迁移,希望在迁移后能保持原有的branch.tag.commit记录等.可以使用以下方式: 1.clone代码到本地. 2.修改remote仓库的地址,添加新 ...
- 随机森林学习-sklearn
随机森林的Python实现 (RandomForestClassifier) # -*- coding: utf- -*- """ RandomForestClassif ...
- 每天一个linux命令：scp命令
scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...
- PHP中的10个实用函数
1.php_check_syntax 这个函数可以用来检查特定文件中的PHP语法是否正确. <?php $error_message = ""; $filename = &q ...
- 《剑指offer》-青蛙跳台阶II
一只青蛙一次可以跳上1级台阶,也可以跳上2级--它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 其实题目很水...就是一个等比数列通项公式嘛 f(0)=1 f(1)=1 f(n)=f( ...
- DNS java
https://www.cnblogs.com/549294286/p/5307316.html https://www.cnblogs.com/crazyacking/p/5672032.html
- Zookeeper笔记（三）部署与启动Zookeeper
下载zookeeper安装包 去Zookeeper官网,下载地址http://zookeeper.apache.org/releases.html,建议下载稳定版本,我下载的是zookeeper-3. ...
- Docker 启动时容器无法联网
转自:https://blog.csdn.net/u014062332/article/details/52911405 启动docker web服务时 虚拟机端口转发 外部无法访问 centos 7 ...
- BZOJ1968 [Ahoi2005]COMMON 约数研究 数论
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1968 题意概括 求 ΣF(i) (1<=i<=n)N<=1000000 F( ...