<!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. XLSTransformer生成excel文件简单演示样例

    项目结构图: 项目中所用到的jar,能够到http://www.findjar.com/index.x下载 ExcelUtil类源代码: package util; import java.io.IO ...

  2. 黑马程序猿_Objective C 类与协议

    <a href="http://www.itheima.com"target="blank">ASP.Net+Unity开发</a>.& ...

  3. Mongodb 上传图片

    mongdb 上传图片: [root@hy-mrz01 ~]# mongofiles put -u "pics" -p "jh7yxx" --host 127. ...

  4. 基于visual Studio2013解决面试题之0502字符串左移

     题目

  5. CSDN改版问题多多

    刚刚上CSDN,发现改版了,推出C币功能. 然后看了2分钟,发现了一个Bug,于是准备提交到论坛.但是--居然提交Bug的论坛也出现Bug.印象中,每次CSDN更新版本号Bug都非常多,这,作为程序猿 ...

  6. C++ 观察者模式样例

    C++ 观察者模式样例 #include <iostream> #include <set> #include <string> using namespace s ...

  7. Effective C++_笔记_条款05_了解C++默认编写并调用哪些函数

    (整理自Effctive C++,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 直接上代码: 1: class Empty{}; 如果你写了这样 ...

  8. cp命令的实现

    #include <unistd.h> #include <fcntl.h> #include <stdlib.h> #define BUFFERSIZE 4096 ...

  9. MySQL 创建函数(Function)

    目标 怎么样MySQL创建数据库功能(Function) 语法 CREATE FUNCTION func_name ( [func_parameter] ) //括号是必须的,參数是可选的 RETUR ...

  10. App 运营 推广相关

    基本要素 1.定位和产品 2.取个好名字,一目了然+下载冲动 3.设计一个好图标,有感性和直观的认识 4.做好产品的说明.关键字,截图(前1-2行是重点) 5.做市场的排名(相关因素如下)   (1) ...