需求：

运用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实现菜单案例的更多相关文章

  1. php ajax json jquery 记录

    php+jquery+ajax+json简单小例子 <html> <title>php+jquery+ajax+json简单小例子</title> <?php ...

  2. Ajax+json+jquery实现无限瀑布流布局

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. AJAX+json+jquery实现预加载瀑布流布局

    宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...

  4. springboot04 Ajax json Jquery

    一.Ajax 1.同步&异步请求 在所有的请求响应交互世界里,我们有通常会划分出来两种形态的请求, 一种是同步请求.另一种是异步请求 .比如注册.登录.添加数据等等这些请求执行的就是同步请求, ...

  5. ajax json jQuery提示parsererror错误解决办法

    $.ajax({ type:'POST', url:'<%=basePath%>/xxx.do', dataType:'JSON', data:{ }, success:function( ...

  6. 使用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 ...

  7. Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图

    http://my.oschina.net/xshuai/blog/345117?fromerr=hEXYMdR0 http://www.oschina.net/code/snippet_144464 ...

  8. jquery ajax json简单的分页，模拟数据，没有封装，只显示原理

    简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...

  9. 练习 jquery+Ajax+Json 绑定数据 分类： asp.net 练习 jquery+Ajax+Json 绑定数据 分类： asp.net

    练习 jquery+Ajax+Json 绑定数据

随机推荐

  1. Qt的Socket数据通讯的一个样例。

    QTcpServer类 用来侦听port ,获取QTcpSocket. QTcpSocket有  connected的信号(已经连接),还有readyread()信号,表示已经有数据发过来了.准备读取 ...

  2. ios swift学习日记4-字符串和字符

    近期ios的swift语言好像火了起来,本人没有objectc的基础,但之前是有c跟java的基础的. 从这几天開始学习ios的swift语言,后期以博客形式公布.这里提供一本翻译的英文版的swif书 ...

  3. (转)android res文件夹里面的drawable(ldpi、mdpi、hdpi、xhdpi、xxhdpi)

    android res文件夹里面的drawable(ldpi.mdpi.hdpi.xhdpi.xxhdpi) (1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),F ...

  4. nyoj--92--图像有用区域（模拟）

    图像有用区域 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 "ACKing"同学以前做一个图像处理的项目时,遇到了一个问题,他需要摘取出图片中某个黑 ...

  5. hdoj--1176--免费馅饼（动态规划）

    免费馅饼 Time Limit: 1000MS   Memory Limit: 32768KB   64bit IO Format: %I64d & %I64u Submit Status D ...

  6. Bone Collector（hdoj--2602--01背包）

    Bone Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  7. k8s Job、Cronjob 的使用

    Job负责处理任务,即仅执行一次的任务,它保证批处理任务的一个或多个Pod成功结束.而CronJob则就是在Job上加上了时间调度. Job 我们用Job这个资源对象来创建一个任务,我们定一个Job来 ...

  8. 大数据攻城狮之Linux基础------rpm软件管理

    rpm的英文名称为: Redhat package manager 常用的命令加组合: i 安装 rpm -ivh 软件包名 当然我们的rpm也可以支持多包同时操作 rpm -ivh 软件包1 软件包 ...

  9. 【Oracle】删除undo表空间时，表空间被占用：ORA-30042: Cannot offline the undo tablespace

    特别注意:此办法只用于实在没有办法的时候,因为需要加入oracle中的隐含参数,慎用!!! 1. 先查一下是什么在占用undo SYS@ENMOEDU>select segment_name,o ...

  10. Jetty容器配置https

    Configuring the Jetty Container as a Https Connector Jetty版本:9.2.22.v20170606 Pom.xml <?xml versi ...