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 绑定数据
随机推荐
- Android 怎样实现 焦点图的 无线循环滑动的状态?
參考网址:http://my.oschina.net/xsk/blog/119167 总体的架构:ViewPgaer 中直接嵌套 IamgeView 方案一: 重写Viewpager 这样有局限性 ...
- session理解
Session,底层的实现就是一个Map<集合>,有些Data在Server内存中,APP要分层.Data在各个层之间肯定要以一种形态传递(泛型),之前Servlet dao.getLis ...
- 利用LruCache载入网络图片实现图片瀑布流效果(改进版)
PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...
- package-org.springframework.ui-interface：Model.class
ylbtech-package-org.springframework.ui-interface:Model.class 1.返回顶部 1. /* * Copyright 2002-2012 the ...
- Java图片的压缩
1.如果在springMvc中,会自带生成MultipartFile文件,将MultipartFile转化为File MultipartFile file1 = file; CommonsMultip ...
- ABP框架应用汇总
相信很多人可能听过或没听过ABP这个框架,在我接触此框架时也是在现在所在的公司开始接触的,我们用此开源框架作为我们项目的架构,我们正好做的是Saas云服务多租户管理系统开发,并且经过了一年多高 ...
- pinpoint体系中,关于如何清理过期hbase数据
版本: pinpoint:1.7.1 hbase:1.2.6 命令行命令: $HBASE_HOME/bin/hbase shell newrestruct.hbase 备注:保留一天半的数据(秒 ...
- （转载）自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果
自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果 作者 小武站台 关注 2016.02.19 11:34 字数 1244 阅读 3885评论 ...
- 最小环 hdu1599 poj1734
最小环用floyd改编. hdu1599特殊一些.要求至少有三个不同的点,并且除了起点与终点重合外,中间不能有环.有点很奇怪,最大值不能为0x3f3f3f3f. poj1374就没那么讲究. //hd ...
- DataTable和DataRow和DataColumn ~~~~~~~~~~[][]
DataSet.Tables[0].Rows[0][1]表示DataSet中第一张表(因为Tables[0]就是第一张表的意思)中第一行(Rows[0][]) 第二列(Rows[][1])的数据. D ...