需求：

运用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. 实战c++中的string系列--CDuiString和string的转换(duilib中的cduistring)

    使用所duilib的人定会知道cduistring类型,先看看这个类是怎么定义的: class UILIB_API CDuiString { public: enum { MAX_LOCAL_STRI ...

  2. Linux 定时任务的学习

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

  3. DeepLearning to digit recognizer in kaggle

    DeepLearning to digit recongnizer in kaggle 近期在看deeplearning,于是就找了kaggle上字符识别进行练习.这里我主要用两种工具箱进行求解.并比 ...

  4. luogu3111 [USACO14DEC]牛慢跑Cow Jog_Sliver

    题目大意 有N (1 <= N <= 100,000)头奶牛在一个单人的超长跑道上慢跑,每头牛的起点位置都不同.由于是单人跑道,所有他们之间不能相互超越.当一头速度快的奶牛追上另外一头奶牛 ...

  5. php auto_load mvc 接口框架（原创）

    autoload.php <?php function framework_autoload($className){ $className=str_replace('\\','/',$clas ...

  6. [jqpolt] formatString 日期格式化列表

    // 年 %Y   2008 %y   08 // 月 %m   09 %#m   9 %B   September %b   Sep // 日 %d   05 %#d   5 %e   5 %A   ...

  7. python 网络通讯 服务器端代码demo，能够同时处理多个客户端的连接请求

    这是一个python网络通讯服务器端的代码demo,能够同时处理多个客户端的连接请求. from socket import * import threading from datetime impo ...

  8. c++对象关系映射（ORM）框架

    ORM(Object Relational Mapping, 对象关系映射),用来将基于对象的数据结构映射到SQL的数据结构中,即将基于对象的数据映射到关系表中的字段,然后我们可以通过对象提供的接口来 ...

  9. guice基本使用，guice整合guice-servlet，web开发（五）

    介绍 Guice Servlet 为使用web应用程序和Servlet容器提供了一个完整的模式.. Guice's servlet 扩展允许从你的servlet应用中完全淘汰web.xml,并且具有类 ...

  10. resgen.exe 已退出 代码为 1073741701的错误的解决办法

    以管理员的身份打开命令提示窗口:(开始-运行-cmd),更改目录至"CD C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\bin\”下 ...