Ajax json jquery实现菜单案例
需求：
运用AJAX请求文件menu.json，配置菜单栏，并实现以下功能点：
1. 点击向左箭头，菜单向左移动，隐藏
2. 点击向右箭头，菜单向右移动，显示
3. 点击一级菜单，被点击菜单的子菜单显示，其他兄弟节点的子菜单隐藏
页面显示：ajaxTest\WebRoot\nav.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax json jquery 菜单案例</title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
</style>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url: "data/menu.json",
success: function( data) {
var html = "<ul>";
for(var i=0; i<data.length; i++) {
html += "<li>" + data[i].topMenu +"<ul>";
var subData = data[i].subMenu;
for(var j=0; j<subData.length; j++) {
html += "<li>" +subData[j] + "</li>";
}
html += "</ul></li>";
}
html += "</ul>";
$(".nav-container").prepend(html);
$(".nav-container>ul>li").siblings().children().hide();
},
error:function(data){
alert(data);
}
}) $(".drag-handle").on("click", function() {
if($(this).hasClass("right")) {
$(this).text(">");
$(this).removeClass("right");
$(this).addClass("left");
$(this).parent().animate({"left": "-150px"}, 'slow');
} else {
$(this).text("<");
$(this).removeClass("left");
$(this).addClass("right");
$(this).parent().animate({"left": "0px"}, 'slow');
}
})
$(document).on("click", ".nav-container>ul>li", function() {
$(this).children().toggle();
$(this).siblings().children().hide();
return false;
})
})
</script>
</head>
<body>
<div class="nav-container">
<div class="drag-handle right"><</div>
</div>
</body>
</html>
菜单Json数据：ajaxTest\WebRoot\data\menu.json
[
{
"topMenu": "菜单1",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
},
{
"topMenu": "菜单2",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
},
{
"topMenu": "菜单3",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
},
{
"topMenu": "菜单4",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
},
{
"topMenu": "菜单5",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
},
{
"topMenu": "菜单6",
"subMenu": [
"子菜单1",
"子菜单2",
"子菜单3"
]
}
]
页面样式：ajaxTest\WebRoot\css\style.css
.nav-container {
position: absolute;
top:;
left:;
width: 170px;
}
ul {
width: 150px;
float: left;
background: #204d62;
}
ul li {
list-style: none;
line-height: 40px;
text-align: center;
color: #fff;
cursor: pointer;
}
ul li > ul {
background: #eee;
}
ul li > ul li {
color: #204d62;
}
.drag-handle {
float: left;
width:20px;
height:40px;
background: #204d62;
color: #fff;
font-weight: bold;
line-height: 40px;
text-align: center;
cursor: pointer;
}
Ajax json jquery实现菜单案例的更多相关文章
- php ajax json jquery 记录
php+jquery+ajax+json简单小例子 <html> <title>php+jquery+ajax+json简单小例子</title> <?php ...
- Ajax+json+jquery实现无限瀑布流布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- AJAX+json+jquery实现预加载瀑布流布局
宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...
- springboot04 Ajax json Jquery
一.Ajax 1.同步&异步请求 在所有的请求响应交互世界里,我们有通常会划分出来两种形态的请求, 一种是同步请求.另一种是异步请求 .比如注册.登录.添加数据等等这些请求执行的就是同步请求, ...
- ajax json jQuery提示parsererror错误解决办法
$.ajax({ type:'POST', url:'<%=basePath%>/xxx.do', dataType:'JSON', data:{ }, success:function( ...
- 使用Jsp/Js/Ajax/Json/Jquery/Easyui + Servlet + JDBC + Lucene/Mysql/Oracle完成数据库分页
package loaderman.action; import java.io.IOException; import java.io.PrintWriter; import java.util.L ...
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
http://my.oschina.net/xshuai/blog/345117?fromerr=hEXYMdR0 http://www.oschina.net/code/snippet_144464 ...
- jquery ajax json简单的分页，模拟数据，没有封装，只显示原理
简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...
- 练习 jquery+Ajax+Json 绑定数据 分类： asp.net 练习 jquery+Ajax+Json 绑定数据 分类： asp.net
练习 jquery+Ajax+Json 绑定数据
随机推荐
- Problem G 宝石合成 （内蒙古14年省赛）
1117: Problem G 宝石合成 时间限制: 1 Sec 内存限制: 128 MB 提交: 18 解决: 4 [提交][状态][讨论版] 题目描写叙述 故事人物:豆豆强 走上致富之路的豆豆 ...
- 二维数组+字符串split+Double包装类 例题
将String s = "1,2;3,4,5;6,7,8" 存放在double类型的二维数组中,使得 d[0][0]=1.0 d[0][1]=2.0 d[1][0]=3.0 d[1 ...
- 在Android系统中添加宏控制代码【原创】
关键词:Android 宏控制 Androd.mk 平台信息:内核:linux3.4.39 系统:android/android5.1平台:S5P4418 作者:庄泽彬(欢迎转载,请注明作者) 邮 ...
- poj--2239--Selecting Courses（最大匹配）
Selecting Courses Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9782 Accepted: 4400 ...
- WinForm中DataReader绑定到DataGridView的两种方法
在WinForm中,DataReader是不能直接绑定到DataGridView的,我想到了用两种方法来实现将DataReader绑定到DataGridView. SqlCommand command ...
- [Offer收割]编程练习赛41
比赛日程安排 #pragma comment(linker, "/STACK:102400000,102400000") #include<stdio.h> #incl ...
- 揭秘IPHONE X刷脸认证的技术奥秘
苹果最新发布的Iphone X具有一个全新的功能叫做刷脸认证,背后的技术其实是生物密码的更新,通过人脸识别取代了传统的指纹识别,大家肯定对这种新技术非常感兴趣,下面我们通过这篇文章为大家介绍人脸识别的 ...
- poj3083 Children of the Candy Corn 深搜+广搜
这道题有深搜和广搜.深搜还有要求,靠左或靠右.下面以靠左为例,可以把简单分为上北,下南,左西,右东四个方向.向东就是横坐标i不变,纵坐标j加1(i与j其实就是下标).其他方向也可以这样确定.通过上一步 ...
- 使用光盘作为yum源安装ifconfig等网络命令
# mkdir -p /mnt/cdrom# 如果是光驱:mount -t iso9660 /dev/cdrom /mnt/cdrom/# 如果是ISO:mount -o loop /usr/loca ...
- spring boot （一）
spring boot 启动注解 @SpringBootApplication @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIM ...