<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>jquery实现菜单功能（单击展开或者关闭）-一般应用于后台</title>

<script src="js/jquery-1.11.1.min.js"></script>

<style>

.bor{border:10px solid yellow;}

.red{color:red;}

</style>

<script>

$(document).ready(function(e) {

    //class=menu的h1的下一个元素：无类型

    $('h1.menu').next().css('display','none');

	 //为class=menu的h1加入单击事件：显示时单击隐藏，隐藏时单击显示

    $('h1.menu').click(function(){

        //$(this).next().show(); 

		//有此行菜单你同意打开一个

        $('h1').next().css('display','none');   

        //$(this).next().is(":hidden") ? $(this).next().show() : $(this).next().hide();

        var o = $(this).next();

        o.is(':hidden') ? o.show() : o.hide();

    });

    $('#ddd').add('<b>ok</b>');

});

</script>

</head>

<body>

<div id="ddd">aaaa</div>

<hr>

<h1 class='menu'>菜单一</h1>

<ul>

    <li>1111111111</li>

    <li>2222222222</li>

    <li>3333333333</li>

    <li>4444444444</li>

</ul>

<h1 class='menu'>菜单二</h1>

<ul>

    <li>aaa</li>

    <li>bbb</li>

    <li>ccc</li>

    <li>ddd</li>

</ul>

<h1 class='menu'>菜单三</h1>

<ul>

    <li>31111111111</li>

    <li>32222222222</li>

    <li>33333333333</li>

    <li>34444444444</li>

</ul>

<h1 class='menu'>菜单四</h1>

<ul>

    <li>441111111111</li>

    <li>442222222222</li>

    <li>443333333333</li>

    <li>444444444444</li>

</ul>

</body>

</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. android 屏幕尺寸的理解

    对android设备屏幕尺寸单位的理解 一.android移动设备(手机和平板)常用的关于屏幕的一些单位: 1.px:像素点,应该是一个统一的单位,与我们国际单位米(M)应该是一回事,它应该是屏幕尺寸 ...

  2. android apk打包之后js调用失效的解决办法

    现在android下应用开发的界面用html5+css3写,交互用javascript和java沟通,但是用上混淆后发现javascript调用java类定义的方法老说找不到这个方法.一番折腾后发现是 ...

  3. 软件下载网（包括MAC软件大全）

    http://www.ddooo.com/ MAC软件大全: http://www.ddooo.com/apple/15_5_1.htm

  4. 支付宝打造公共账号业务网关， RSA密钥对生成

    作者: 玉龙      版权全部,同意转载. 请注明出处(创建金融_玉龙  http://www.weibo.com/u/1872245125) 原文地址: http://blog.csdn.net/ ...

  5. 改动导航栏上返回button上的字，比如把back改动为返回

    改动导航栏上返回button上的字,比如把back改动为返回 注意:这个须要在跳转之前到视图控制器中写,而不是在跳转之后到控制器中写 UIBarButtonItem *backIetm = [[UIB ...

  6. Servlet配置对象、上下文对象、多线程问题

    一.Servlet配置对象(ServletConfig):Servlet初始化时,容器调用其init(ServletConfig)方法,传递该对象. 1.获得对象方法: (1).直接使用getServ ...

  7. EasyUI - Dialog 对话框

    效果: html代码: 其中有class加载方式和Javascript加载方式. <!--class加载方式--> <%--<div id="dd" cla ...

  8. Windows Azure 安全最佳实践 - 第 1 部分：深度解析挑战防御对策

    我每次与开发人员讨论将应用程序迁移到云时都围绕着两个主要问题. 1. 首先是业务.将应用程序迁移到云可以带来怎样的规模经济? 2. 其次是安全问题."云的安全性如何,尤其是Windows A ...

  9. 九度OnlineJudge之1018：统计同成绩学生人数

    题目描述: 读入N名学生的成绩,将获得某一给定分数的学生人数输出. 输入:                        测试输入包含若干测试用例,每个测试用例的格式为 第1行:N 第2行:N名学生的 ...

  10. STM8S EEPROM 操作

    STM8S 内置EEPROM,对于非常大须要带记忆的产品来说,是个非常好的资源,下面是我个人摸索出来的,而且验证OK,大家如须要可放心使用. #define EEPROMADDR0X000 ((u32 ...