需求：

运用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. 开启 J2EE（五）— Servlet之状态管理

    HTTP无状态协议 首先我们要知道: HTTP协议是无状态协议. 我们知道HTTP协议就是server通过Request从浏览器接收和Response向浏览器输出的这么一个过程(浏览器和server的 ...

  2. Linux 强行终止

    kill -9 pid pid是进程号 -9 代表的是数字 INT 2 这个就是你在bash下面用Ctrl+C 来结束一个程序时,bash会向进程发送这个信号,默认的,进程收到这个程序会结束. 你可以 ...

  3. phpfpm的配置

    1.php中fastcgi和php-fpm是什么东西 最近在研究和学习PHP的性能方面的知识,看到了factcgi以及php-fpm,发现我对他们是少之又少的理解,可以说几乎是一无所知,想想还是蛮可怕 ...

  4. 【BZOJ 2351】 Matrix

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2351 [算法] 哈希 [代码] #include<bits/stdc++.h& ...

  5. [TB-Technology] 淘宝在数据处理领域的项目及开源产品介绍

    淘宝在数据存储和处理领域在国内互联网公司中一直保持比较靠前的位置,而且由于电子商务领域独特的应用场景,淘宝在数据实时性和大规模计算及挖掘方面一直在国内保持着领先,因此积累了很多的实践的经验和产品. T ...

  6. java中 抽象类和抽象方法

    在面向对象中,所有的对象都是由类来描绘的,但是并不是所有的类都用来描绘对象的,当一个类并不能包含完整的信息来描绘一个具体的对象时,我们把这个类称为抽象类.抽象类除了不完整的描述一个对象之外,其他的功能 ...

  7. POJ 1386 判断欧拉回路

    题意:要开启一扇门,n个单词是密码,n个单词中,如果一个单词的首字母和前一个单词的尾字母相同,并且每个单词都能这么连起来且只用一次,则门可以开启,否则不能开启,现给出单词,判断门是否可以开. 有向图欧 ...

  8. C#使用ICSharpCode.SharpZipLib.dll进行文件的压缩与解压

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  9. Centos上运行.net core2.0

    一.在centos7上安装.net core sdk 微软文档:https://www.microsoft.com/net/learn/get-started/linux/centos 二.直接在Ce ...

  10. 派遣函数IRP

    派遣函数是Windows驱动程序中的重要概念.驱动程序的主要功能是负责处理I/O请求,其中大部分I/O请求是在派遣函数中处理的. 用户模式下所有对驱动程序的I/O请求,全部由操作系统转换为一个叫做IR ...