需求：

运用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. mysql配置文件夹错误：在安装mysql 5.6.19 时运行cmake命令是出现CMake Error: The source directory does not appear to contai

    在安装mysql 5.5.xx 时运行cmake命令是出现CMake Error: The source directory does not appear to contain CMakeLists ...

  2. HDOJ GCD 2588【欧拉函数】

    GCD Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  3. java中String的21种使用方法

    (构造函数必须new出来) * public String (char[] vaue)                         将一个字符数组变成字符串(构造函数) * public Stri ...

  4. explain 分析

    EXPLAIN的结果中,有哪些关键信息值得注意呢? MySQL的EXPLAIN当然和ORACLE的没法比,不过我们从它输出的结果中,也可以得到很多有用的信息. 总的来说,我们只需要关注结果中的几列: ...

  5. h5-9 canvas

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 关于Mybatis的几个问题

    今天在用mybatis开发的时候遇到两个问题,下面一一列出并给出解决方案. 问题一 最开始我设置的实体类中有个字段如isParent为boolean类型,set和get方法是eclispe自动生成的. ...

  7. 【BZOJ2806】【CTSC2012】Cheat 广义后缀自动机+二分+Dp

    题目 题目在这里 思路&做法 我们先对标准作文库建广义后缀自动机. 然后对于每一篇阿米巴的作文, 我们首先把放到广义后缀自动机跑一遍, 对于每一个位置, 记录公共子串的长度\((\)即代码和下 ...

  8. ArrayList、Vector和LinkedList的区别

    ArrayList.Vector和LinkedList类均在java.util包下,均为可伸缩数组,即可以动态改变长度的数组 ArrayList和Vector都是基于存储元素的Object[] arr ...

  9. Gerapy 使用详解

    https://blog.csdn.net/fengltxx/article/details/79894839

  10. Selenium之当鼠标悬浮时隐藏的元素才出现

    在自动化过程中,有些导航按钮只有当鼠标悬浮在登录信息上时,它才能出现.这时候如果想要点击导航按钮直接用selenium的webDriver是无法定位的元素的,因为这些元素是隐藏的,只有鼠标悬浮时才出现 ...