需求：

运用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. ant 调用

    博客园 首页 新随笔 联系 订阅 管理   [图文] 使用ant编译和发布java项目       开发JavaEE项目经常会碰到修改代码后,项目没有重新编译的问题.老大给指明了一个解决办法:用ant ...

  2. Linux 定时任务的学习

    名称 : crontab 使用权限 : 所有使用者 使用方式 : crontab file [-u user]-用指定的文件替代目前的crontab. crontab-[-u user]-用标准输入替 ...

  3. 【java项目实战】ThreadLocal封装Connection，实现同一线程共享资源

    线程安全一直是程序员们关注的焦点.多线程也一直是比較让人头疼的话题,想必大家以前也遇到过各种各种的问题.我就不再累述了.当然,解决方案也有非常多,这篇博文给大家提供一种非常好的解决线程安全问题的思路. ...

  4. Maven与IDEA结合

    转自:https://blog.csdn.net/zzpzheng/article/details/49474671 1. 什么是 Maven,为什么要使用 Maven 而不是 Ant Maven简单 ...

  5. 关于阿里云oss

    这两天抽时间看了一下阿里云oss,阿里云oss是阿里为大数据推出的开放存储服务,为多种语言预留出了接口,下面是我对php接口的一点理解. 当注册了阿里云oss账号时会得到接口,在config里面填上这 ...

  6. Vue.js和Nodejs的关系

    首先vue.js 是库,不是框架,不是框架,不是框架. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你 ...

  7. Android图片剪裁库

    最近利用一周左右的业余时间,终于完成了一个Android图片剪裁库,核心功能是根据自己的理解实现的,部分代码参考了Android源码的图片剪裁应用.现在将该代码开源在Github上以供大家学习和使用, ...

  8. [C]关于交换

    交换(c,c++): 1)temp交换(也适用于非数型) 定义一个新的变量,借助它完成交换. int a,b; a=10; b=15; int t; t=a; a=b; b=t; 2)位运算 位运算不 ...

  9. Windows下PHP的redis扩展下载地址

    Redis下载地址:http://windows.php.net/downloads/pecl/releases/redis/ igbinary下载地址:http://windows.php.net/ ...

  10. 遍历及过滤 first(), last() 和 eq() filter() 和 not()

    三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素.其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹 ...