jquery 展开折叠菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>在此处插入标题</title>

<style>

div {

    width: 200px;

    line-height: 30px;

    font-size: 14px;

    padding-left: 15px;

    border: 1px solid #6699cc;

}

.menu {

    height: 30px;

    background-color: #6699cc;

    color: white;

    font-weight: bold;

}

</style>

<script language='javascript' src='../jQuery/jquery.js'></script>

<script>

    $().ready(function() {

        //将所有菜单隐藏

        $('.menu + div').hide();

        //展开第一个菜单

        $('#m1 + div').show();

        //绑定使用menu样式的div的点击事件

        $('.menu').bind('click', function() {

            //关闭所有菜单

            $(".menu + div").hide();

            //点击哪个menu，就取得它的id

            var id = this.id;

            //找到它后面相邻的div

            $('#' + id + '+ div').toggle();

        });

    });

</script>

</head>

<body>

    <div id='m1' class='menu'>商品管理</div>

    <div>

        添加商品

        <br>

        管理商品

        <br>

        商品入库

        <br>

        浏览商品

    </div>

    <div id='m2' class='menu'>商品管理</div>

    <div>

        添加商品

        <br>

        管理商品

        <br>

        商品入库

        <br>

        浏览商品

    </div>

    <div id='m3' class='menu'>商品管理</div>

    <div>

        添加商品

        <br>

        管理商品

        <br>

        商品入库

        <br>

        浏览商品

    </div>

    <div id='m4' class='menu'>商品管理</div>

    <div>

        添加商品

        <br>

        管理商品

        <br>

        商品入库

        <br>

        浏览商品

    </div>

</body>

</html>

jquery 展开折叠菜单的更多相关文章

  1. jquery 展开折叠效果

    仅供参考  图片 jquery.js 自己处理 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...

  2. 利用ExpandableListView和gridview 显示可展开折叠菜单导航

    这篇随身笔带来的是结合聚合数据“菜谱大全”做的一个菜谱可折叠一级+二级列表. 先发来一些截图一睹为快吧. ExpandableListView 可用于折叠型菜单列表,其布局主要通过getGroupVi ...

  3. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  4. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  5. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  6. jQuery Accordion 插件用于创建折叠菜单

    jQuery Accordion 插件用于创建折叠菜单.它通常与嵌套的列表.定义列表或嵌套的 div 一起使用.选项用于指定结构.激活的元素和定制的动画. 后期完善

  7. JQuery案例：折叠菜单

    折叠菜单(jquery) <html> <head> <meta charset="UTF-8"> <title>accordion ...

  8. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  9. cocos2dx-lua使用UIListView制作二级折叠菜单

    折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...

随机推荐

  1. 字符串匹配的Boyer-Moore算法 详解 加 C# 实现

    上一篇文章,我介绍了KMP算法. 但是,它并不是效率最高的算法,实际采用并不多.各种文本编辑器的"查找"功能(Ctrl+F),大多采用Boyer-Moore算法. Boyer-Mo ...

  2. PHP 与网址相关内容

    在PHP中,有时需要知道脚本所处的位置,这时会用到$_SERVER['SCRIPT_NAME'].$_SERVER['SCRIPT_FILENAME']及__FILE__.那么他们之间有什么不同呢? ...

  3. php的urlencode()URL编码函数浅析

    URLEncode:是指针对网页url中的中文字符的一种编码转化方式,最常见的就是Baidu.Google等搜索引擎中输入中文查询时候,生成经过Encode过的网页URL.   URLEncode的方 ...

  4. shell kill掉含同一字符的关键字的进程

    如何kill掉进程名包含某个字符串的一批进程:kill -9 $(ps -ef|grep 进程名关键字|gawk '$0 !~/grep/ {print $2}' |tr -s '\n' ' ') 观 ...

  5. hibernate操作数据库例子

    1.工程目录结构如下 2.引入需要的jar包,如上图. 3.创建持久化类User对应数据库中的user表 package com.hibernate.配置文件.pojo; import java.sq ...

  6. [Effective JavaScript 笔记] 第7条：视字符串为16位的代码单元序列

    Unicode编码,基础:它为世界上所有的文字系统的每个字符单位分配一个唯一的整数,该整数介于0~1114111之间,在Unicode术语中称为代码点(code point). 和其它字符编码几乎没有 ...

  7. 用 VeraCrypt 加密闪存盘

    导读 很多安全专家偏好像 VeraCrypt 这类能够用来加密闪存盘的开源软件,是因为可以获取到它的源代码.要是你需要在 Windows 系统,苹果的 OS X 系统或者 Linux 系统上加密以及访 ...

  8. Unity3D使用小技巧

    原地址:http://unity3d.9tech.cn/news/2014/0411/40178.html 1.Crtl+f摄像机自动适配场景. 2.可以用一个立方体作为底盘. 3.人物角色可以直接引 ...

  9. Matlab实现线性回归和逻辑回归: Linear Regression & Logistic Regression

    原文:http://blog.csdn.net/abcjennifer/article/details/7732417 本文为Maching Learning 栏目补充内容,为上几章中所提到单参数线性 ...

  10. PHP学习之一晚撸下W3chscool

    PHP 多维数组 其实简单的而言,多维数组就是由单个的数组组成的,两个数组嵌套组成一个二维数组,三个顾名思义就是三维数组. 先来一个简单的数组. 数字是key,引号里的是value <?php ...