<!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. javascript每日一练（二）——javascript（函数，数组）

    一.函数 什么是函数 function show(){}//不带参数 function show(){return 123;}//不带参数,有返回值 function show(arg1, arg2, ...

  2. 基于visual Studio2013解决C语言竞赛题之1015日期计算

        题目 解决代码及点评 /* 15. 已知某年不是闰年,给定该年某一天的月份和日期, 求这一天是该年的第几天. */ #include <stdio.h> #incl ...

  3. Android开发之大位图二次採样压缩处理（源码分享）

    图片有各种形状和大小.在很多情况下这些图片是远远大于我们的用户界面(UI)且占领着极大的内存空间,假设我们不正确位图进行压缩处理,我们的程序会发生内存泄露的错误. MainActivity的代码 pa ...

  4. linux下tomcat shutdown后 java进程依然存在

    今天遇到一个非常奇怪的问题,如标题所看到的: linux下(之所以强调linux下,是由于在windows下正常),运行tomcat ./shutdown.sh 后,尽管tomcat服务不能正常訪问了 ...

  5. Java与C#的语法区别（不断更新中...）

    1.static关键字: 在java中静态成员能够被对象和类名调用: 在C#中,静态成员只能被类调用不能被对象调用. 2.for循环: 在java中可以在for前面添加标记,然后在for循环中可以br ...

  6. 11586 - Train Tracks

    Problem J: Train Tracks Andy loves his set of wooden trains and railroad tracks. Each day, Daddy has ...

  7. android调用音乐播放器，三种方

    小弟想请问一下.怎样在自己写的程序中调用系统的音乐播放器呢. 我在google上搜索了.主要是有两种方法,可是都不是我想要的. 第一种是.使用mp3音乐文件的uri.和intent,进行调用.可是这样 ...

  8. VHDL TestBench 测试终止时自动结束仿真——assert方法

    可在结束仿真位置添加如下代码: assert false report "Simulation is finished!" severity Failure; 则在Modelsim ...

  9. （1）前言——（10）jquery项目的历史（History of the jQuery project）

    This book covers the functionality and syntax of jQuery 1.6.x, the latest version at the time of wri ...

  10. MySQL 暂时文件夹

    MySQL数据文件夹/data/mysql所在的上层文件夹/data磁盘空间不足导致MySQL启动失败,所以清理了/data文件夹下除了mysql子文件夹外的其它无用文件夹.重新启动发现还是失败.检查 ...