<!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. 数据交换工具Kettle

    网上搜集了一些关于开源数据交换工具Kattle的文章,特收藏例如以下: 文章一:ETL和Kettle简单介绍 ETL即数据抽取(Extract).转换(Transform).装载(Load)的过程.它 ...

  2. WCF技术剖析之八：ClientBase<T>中对ChannelFactory<T>的缓存机制

    原文:WCF技术剖析之八:ClientBase<T>中对ChannelFactory<T>的缓存机制 和传统的分布式远程调用一样,WCF的服务调用借助于服务代理(Service ...

  3. ajax动态加载的图标

    http://www.ajaxload.info/ 这个网站可以动态生成ajax加载样式的小图片,git格式,挺不错推荐给大家

  4. 生成md5密码

    mysql> select md5(concat((select md5("admin123") from test limit 1),'`xx')) from test; ...

  5. Duanxx的C++学习： 使用类没有被定义 原因及解决方法

    今天,随着C++写的神经网络算法.我发现了一个很令人费解的问题,下面的描述一般地描述,例如: 我有两个类ClassA和ClassB,它们分别有成员变量a.b; ClassA有一个函数是这种:Funct ...

  6. Mac 修改Host 绑定host

    Mac 系统下 ,修改Host 文件: 打开命令行终端 输入 sudo vi /etc/hosts 之后回车确认,进入vi 编辑界面(进行vi编辑操作,之后保存就行了) 版权声明:本文为博主原创文章, ...

  7. Delphi线程池

    unit uThreadPool; {   aPool.AddRequest(TMyRequest.Create(RequestParam1, RequestParam2, ...)); } inte ...

  8. php 控制页面跳转

    <?php class UserAction extends Action{ public function index(){ echo "你好!"; $m=M('user' ...

  9. [置顶] MyEclipse显示中文界面，在线安装教程

    准备工作 1,装好MyEclipse软件 2,可以上网 3,在线安装地址:http://download.eclipse.org/technology/babel/update-site/R0.11. ...

  10. VMware vSphere服务器虚拟化实验六 vCenter Server 添加储存

                                                                          VMware vSphere服务器虚拟化实验六 vCente ...