<!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. 利用内容提供者插入sms(装B程序)

    1.sms的权限配置 <uses-permission android:name="android.permission.READ_SMS"/> <uses-pe ...

  2. NEC协议

    注意: 用示波器在接收头抓的电平看起来和NEC协议刚好相反, 那是因为:HS0038B 这个红外一体化接收头,当收到有载波的信号的时候,会输出一个低电平,空闲的时候会输出高电平. 具体情况,具体分析. ...

  3. kali 国内镜像源，以及PD_tools,Vm_tools的安装

    kali 系统apt-get 更新镜像源,往上分享的有,这里整理下 中科大kali源 deb http://mirrors.ustc.edu.cn/kali sana main non-free co ...

  4. jQuery 3.0 的 Data

    jQuery 3.0 的 Data Snandy If you cannot hear the sound of the genuine in you, you will all of your li ...

  5. 【Unity技巧】使用单例模式Singleton

    这几天想把在实习里碰到的一些好的技巧写在这里,也算是对实习的一个总结.好啦,今天要讲的是在Unity里应用一种非常有名的设计模式——单例模式. 开场白 单例模式的简单介绍请看前面的链接,当然网上还有很 ...

  6. Ruby on Rails 實戰聖經阅读(三)

    由于是1.8.x:圣经的1.9.3差太多,所以另外按1.8.X来创建hello world 第一個Hello World!! 1. 创建项目rails -d mysql first 2.创建控制器  ...

  7. QT调用CURL

    QProcess *mProcess; QStringList arguments; arguments<<"--disable-epsv" <<" ...

  8. QT在构造函数中退出程序

    原地址:http://www.tuicool.com/articles/RZnYze 在QT的界面类的构造过程中,如果想退出整个程序,暴力的做法是调用exit(-1)进行,另外一种不是那么暴力的方式如 ...

  9. Streaming编程实例（c，c++，python等）

    1.概述 Hadoop Streaming是Hadoop提供的一个编程工具,它允许用户使用任何可执行文件或者脚本文件作为Mapper和Reducer,例如: 采用shell脚本语言中的一些命令作为ma ...

  10. android launcher开发之图标背景以及默认配置

    1:然后我自己看了一下桌面图标的载入过程: 桌面第一次载入时是默认读取一个xml配置文件,完毕配置工作.这个配置文件在Launcher文件夹下, 路径是:\Launcher\res\xml\defau ...