1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="gb2312">
  5. <title>jquery实现菜单功能（单击展开或者关闭）-一般应用于后台</title>
  6. <script src="js/jquery-1.11.1.min.js"></script>
  7. <style>
  8. .bor{border:10px solid yellow;}
  9. .red{color:red;}
  10. </style>
  11. <script>
  12. $(document).ready(function(e) {
  13.  
  14.     //class=menu的h1的下一个元素：无类型
  15.     $('h1.menu').next().css('display','none');
  16.  
  17. 	 //为class=menu的h1加入单击事件：显示时单击隐藏，隐藏时单击显示
  18.     $('h1.menu').click(function(){
  19.         //$(this).next().show(); 
  20.  
  21. 		//有此行菜单你同意打开一个
  22.         $('h1').next().css('display','none');   
  23.  
  24.         //$(this).next().is(":hidden") ? $(this).next().show() : $(this).next().hide();
  25.         var o = $(this).next();
  26.         o.is(':hidden') ? o.show() : o.hide();
  27.     });
  28.  
  29.     $('#ddd').add('<b>ok</b>');
  30.  
  31. });
  32. </script>
  33. </head>
  34.  
  35. <body>
  36. <div id="ddd">aaaa</div>
  37. <hr>
  38. <h1 class='menu'>菜单一</h1>
  39. <ul>
  40.     <li>1111111111</li>
  41.     <li>2222222222</li>
  42.     <li>3333333333</li>
  43.     <li>4444444444</li>
  44. </ul>
  45.  
  46. <h1 class='menu'>菜单二</h1>
  47. <ul>
  48.     <li>aaa</li>
  49.     <li>bbb</li>
  50.     <li>ccc</li>
  51.     <li>ddd</li>
  52. </ul>
  53.  
  54. <h1 class='menu'>菜单三</h1>
  55. <ul>
  56.     <li>31111111111</li>
  57.     <li>32222222222</li>
  58.     <li>33333333333</li>
  59.     <li>34444444444</li>
  60. </ul>
  61.  
  62. <h1 class='menu'>菜单四</h1>
  63. <ul>
  64.     <li>441111111111</li>
  65.     <li>442222222222</li>
  66.     <li>443333333333</li>
  67.     <li>444444444444</li>
  68. </ul>
  69. </body>
  70. </html>

效果图：

jquery实现菜单功能（单击展开或者关闭）-一般应用于后台的更多相关文章

  1. ExtJs中实现tree节点，全部是单击展开和收缩效果，和收藏夹点击功能一样

    listeners : { click : function(node, c) {// 单击节点事件(node是节点对象) if(!node.isLeaf()){//不是叶子节点 node.singl ...

  2. jquery 点击页面其他地方实现隐藏菜单功能

    1.给页面文档添加一个点击事件函数,在函数内实现隐藏菜单功能. $('html').click(function(){//Hide the menus if visible});//用$(docume ...

  3. jQuery 树形菜单

    树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

  4. 几款jQuery右键菜单插件介绍

    在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...

  5. jQuery实现菜单点击隐藏（上下左右）

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

  6. 基于jQuery带备忘录功能的日期选择器

    今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...

  7. Jquery多级菜单插件Slimmenu使用说明

    Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...

  8. js、jquery实现模糊搜索功能

    模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...

  9. Xcode菜单功能中文翻译

    Xcode菜单功能中文翻译 File  文件 Edit  编辑 View 视图 Navigate 导航 Editor 编辑 Product 产品 Window  窗口 Help 帮助 File  文件 ...

随机推荐

  1. C++中实现 time_t, tm 相互转换

    time_t -> tm: localtime tm -> time_t: mktime time_t curTime; time(&curTime); dwCurTime = c ...

  2. 为什么出现Wide character in print at a14.pl line 41

    [root@wx03 ~]# cat a14.pl use Net::SMTP; use LWP::UserAgent; use HTTP::Cookies; use HTTP::Headers; u ...

  3. 在TC(Total Commander)中添加启动Cygwin快捷键的方法

    在TC(Total Commander)中添加启动Cygwin快捷键的方法 1.在Cygwin的安装目录下,增加文件tc-cygwin.bat(例如C:\cygwin-177\tc-cygwin.ba ...

  4. 求助(VC++) 隐藏Console窗体无效

    [逝去的100~~ 2014/10/07 20: 20] 程序想要实现控制台窗体的隐藏,可是窗体每次执行总会弹出来.为什么呢? 代码例如以下: // Mini.cpp : 定义控制台应用程序的入口点. ...

  5. Windows Azure入门教学系列 (八)：使用Windows Azure Drive

    我们知道,由于云端的特殊性,通常情况下,对文件系统的读写建议使用Blob Storage来代替.这就产生了一个问题:对于一个已经写好的本地应用程序,其中使用了NTFS API对本地文件系统读写的代码是 ...

  6. ASP.NET、WinForm - 判断整个页面文本框是否为空

    foreach(Control ctrl in Page.Controls) { foreach(Control childc in ctrl.Controls) { switch(childc.Ge ...

  7. 网页插入QQ 无需加好友

    <p>联系方式:1073351325<a href="tencent://message/?Menu=yes&uin=1073351325&Site=dsf ...

  8. 【ASP.NET Web API教程】2.3.2 创建域模型

    原文:[ASP.NET Web API教程]2.3.2 创建域模型 Part 2: Creating the Domain Models 第2部分:创建域模型 本文引自:http://www.asp. ...

  9. Android SDK Manager安装报错

    安装出错了,上网百度一大堆说法,又说版本兼容问题的,有说http换https的,我这个菜鸟真搞不明白,自己捣腾一下午总算弄上去了! 问题: 安装完Eclipse和ADT却无法更新SDK. 启动Andr ...

  10. Linux下Qt4与qt5的程序使用输入法（ibus与fcitx）不冲突

    这篇文章引用了较多其他作者的内容,也忘记引用的出处了,只能感谢了.以下转入正题. 对于qt5.5,要下载libqt库源码自己编译,参考解决Qt5 Creator无法切换输入法(fcitx),Ubunt ...