写在前面：

1、前端新手

2、欢迎交流

3、

源代码百度云页面示例链接： http://pan.baidu.com/s/1nt0yjd3

链接失效请留言

效果图：

代码部分：jquery部分：

  1. <script>
  2. $(function(){
  3.     $("#1,#2").toggle(
  4.       function(){
  5.           var ss=$(this).attr("id");
  6.           $(this).children().parent().next().slideDown(1000);
  7.           },
  8.       function(){
  9.           $(this).children().parent().next().hide(500);
  10.           });
  11. });
  12.  
  13.   </script>

HTML部分：

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title></title>
  6.  <style>
  7.  html{
  8.      padding:0px;margin:0px;}
  9.  body{
  10.      padding:0px;margin:0px;background-color:#f1f2f2;}
  11.  a{
  12.      text-decoration:none;}
  13.  a:hover{
  14.      text-decoration:none;
  15.      }
  16.  
  17.  #left{
  18.      float:left;width:210.4px; background-color:#1d6ab2;}
  19.  #main{
  20.      float:left;width:84.4%;position:absolute;left:210.4px;}
  21.  #left table{
  22.      margin-left:20px;margin-right:auto;margin-top:4px; text-align:left;}
  23.  #left table td{
  24.      color:#FFF;font-size:14px;font-family:宋体; font-weight:400;}
  25.  #left table td a{
  26.      color:#1d6ab2;font-size:12px;font-family:宋体; font-weight:400; background-color:#fff;
  27.      border-radius:4px;padding:5px;}
  28.  #left table td a:hover{
  29.      background-color:#1d6ab2;color:#FFF;
  30.      }
  31.  #left table td button{
  32.      background:#3f85c0;color:#fff;border:0px;padding:6px;border-radius:4px;font-size:12px;
  33.      }
  34.  #left table td button:hover{
  35.      background:#2e2d80;
  36.      }
  37.  #menu{
  38.      width:100%; margin-left:auto; margin-right:auto;margin-bottom:4px;}
  39.  #menu1,#menu2{
  40.       width:144px;display:none;margin-left:auto; margin-right:auto;clear:left;margin-bottom:3px;margin-top:3px;}
  41.  #menu button{
  42.      width:100%;height:30px;border:0px;margin:0px 0px 0px 0px; background-color:#1D6ab2;color:#FFF;
  43.      font-size:14px;font-family:宋体; font-weight:600;border-radius:1px;
  44.      }
  45.  #menu button:hover{
  46.      background-color:#f1f2f2;color:#1D6ab2;
  47.      }
  48.  #menu1 a,#menu2 a{
  49.       font-size:14px;font-family:宋体; font-weight:600;padding:0px 50px 0px 50px;
  50.       background-color:#f1f2f2;color:#1D6ab2; text-align:center;}
  51.  #menu1 a:hover,#menu2 a:hover{
  52.      background-color:#AAD5E8;color:#1D6ab2;
  53.      }
  54.  
  55.  </style>
  56.  <script src="js/jquery.min.js"></script>
  57.  
  58.  </head>
  59.  
  60.  <body>
  61.        <div id="left" >
  62.        <table>
  63.          <tr><td>用户名：</td><td>李丽</td></tr>
  64.          <tr><td>学&nbsp; 号：</td><td>12</td></tr>
  65.          <tr height="30px"><td ><a href="#">[修改资料]</a></td>
  66.                            <td><a href="#">[修改密码]</a></td></tr>
  67.          <tr ><td><button type="button">切换账户</button></td>
  68.               <td><button type="button">用户登录</button></td></tr>
  69.        </table>
  70.        <hr style="border:1px solid #f1f2f2;height:0px;">
  71.  
  72.        <div id="menu" >
  73.           <button type="button" id="1" >左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
  74.             <div id="menu1">
  75.               <a href="#">text2</a><br>
  76.               <a href="#">text2</a><br>
  77.               <a href="#">text2</a><br>
  78.               <a href="#">text2</a><br>
  79.             </div>
  80.           <button type="button" id="2">左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
  81.                <div id="menu2">
  82.               <a href="#">text2</a><br>
  83.               <a href="#">text2</a><br>
  84.               <a href="#">text2</a><br>
  85.               <a href="#">text2</a><br>
  86.             </div>
  87.           <button type="button" >左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
  88.           <button type="button" >左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
  89.           <button type="button" >左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
  90.           <button type="button" >左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
  91.         </div>
  92.  
  93.        </div>
  94.  </body>
  95.  </html>

Jquery二级简单折叠菜单的更多相关文章

  1. JQuery案例：折叠菜单

    折叠菜单(jquery) <html> <head> <meta charset="UTF-8"> <title>accordion ...

  2. 一个基于jQuery的简单树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...

  3. jquery一个简单的菜单小插件

    刚学会封装插件,先来封装一个小的菜单插件 html部分 <ul class="zong"> <li class="yiji"> < ...

  4. 用JQuery实现简单的菜单隐藏于切换

    <锋利的JQuery>第一个demo<!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  5. jQuery二级下拉菜单

    在线演示 本地下载

  6. 第一百八十九节，jQueryUI，折叠菜单 UI

    jQueryUI,折叠菜单 UI 学习要点: 1.使用 accordion 2.修改 accordion 样式 3.accordion()方法的属性 4.accordion()方法的事件 5.acco ...

  7. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  8. cocos2dx-lua使用UIListView制作二级折叠菜单

    折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...

  9. 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

    用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...

随机推荐

  1. ACM学习-POJ-1125-Stockbroker Grapevine

    菜鸟学习ACM,纪录自己成长过程中的点滴. 学习的路上,与君共勉. ACM学习-POJ-1125-Stockbroker Grapevine Stockbroker Grapevine Time Li ...

  2. UVa 1394: And Then There Was One

    设置一个数组Winner记录经典约瑟夫问题中的剩余者即可递归解决该问题. 注: 约瑟夫问题:有编号为0~n-1的n个人,从0号开始报数1,2,3......报到k的杀死,然后从下一个人开始继续报数1, ...

  3. TS流PAT/PMT详解

    一 从TS流开始 从MPEG-2到DVB,看着看着突然就出现了一大堆表格,什么PAT.PMT.CAT……如此多的表该怎样深入了解呢? 我们知道,数字电视机顶盒接收到的是一段段的码流,我们称之为TS(T ...

  4. 初次使用Oracle

    这是我第一次写博客,主要是记录下自己这半个多月以来的学习笔记,以备以后可以随时查看. 首先就是安装Oracle的问题的,我系统是Win7 64位的,出现各种问题郁闷得不行,最终安装个Oracle102 ...

  5. Android Geocoder(位置解析)

    Android中提供GPS定位服务,同时开发者可以对获得的位置信息进行解析,可以获得位置的详细信息. 1.gps定位 在Eclipse中建立android应用程序.android sdk中提供了loc ...

  6. Java编程的23种设计模式

    设计模式(Design Patterns)                                   --可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用. ...

  7. 搭建discuz论坛（2）

    修改host文件: 使用ab做性能测试: E:\Apache2.2\bin>ab -n1000 -c100 http://bbs.ct.gd/

  8. NSArray 数组操作

    /*---------------------------创建数组------------------------------*/ //NSArray *array = [[NSArray alloc ...

  9. Aandroid Error之 新导入工程报Unable to resolve target 'android-18'和R cannot be resolved

    有段时间没有写安卓了,今天导入以前的项目,结果看到控制台打印出了这样一句:Unable to resolve target 'android-18', 解决方法: 项目->属性->Andr ...

  10. C++程序设计实践指导1.2二维数组的操作运算改写要求实现

    改写要求1:改写为以单链表表示二维数组 #include <cstdlib> #include <iostream> using namespace std; struct L ...