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. hdu 1261 字串数

    解题思路:ACM紫书 第十章 P319 有重复元素的全排列 答案: 所有数的和的阶乘 除以 每个数阶乘的乘积 因为给定 (26*12)! 会爆掉(long long),这里用java 的BigInte ...

  2. css3应用之自定义选中文字的背景颜色

    在看很多的博客主题时候发现大多数都对选中文字的背景颜色做了相应的处理.其实这样是很符合用户体验的.因为有很多的人会用鼠标选择着一行一行的阅读.其中就包括本人... 浏览器中默认的选中的文字颜色为白色, ...

  3. include（thinkphp常用内置标签）

    变量输出使用普通标签就足够了,但是要完成其他的控制.循环和判断功能,就需要借助模板引擎的标签库功能了,系统内置标签库的所有标签无需引入标签库即可直接使用. XML标签有两种,包括闭合标签和开放标签,一 ...

  4. linux c程序中获取shell脚本输出的实现方法

    linux c程序中获取shell脚本输出的实现方法 1. 前言Unix界有一句名言:“一行shell脚本胜过万行C程序”,虽然这句话有些夸张,但不可否认的是,借助脚本确实能够极大的简化一些编程工作. ...

  5. 将DataTable导出为Excel C#

    /// <summary> /// 导出Excel /// </summary> /// <param name="dt">DataTable& ...

  6. Billboard（线段树）

    Billboard Time Limit:8000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit St ...

  7. PHP常用正则表达式

    正则表达式用于字符串处理.表单验证等场合,实用高效.现将一些常用的表达式收集于此,以备不时之需. 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表 ...

  8. [Effective JavaScript 笔记]第43条：使用Object的直接实例构造轻量级的字典

    js对象的核心是一个字符串属性名与属性值的映射表.使用对象实现字典易如反掌,字典是可变长的字符串与值的映射集合. for...in js提供了枚举一个对象属性名的利器--for...in循环. var ...

  9. 教你安装漂亮的Arc GTK主题

    导读 近日,我们又发现了一款深受 Linux 用户喜爱的桌面主题 — Arc GTK,Arc GTK 主题已被很多 GNU/Linux 操作系统支持和采用,其中就包括即将到来的 Linux Mint ...

  10. NGUI 图集生成 图片Sprite 有撕裂边的问题

    修改 Dimensions 的 X 和 Y值进行调整. 在生成图集时 选择Padding 设置1以上 应该不会出现这个问题.