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 2048 神、上帝以及老天爷

    经典错排问题,算出n个人的排列可能,即求n!. 在本题中设定所有人即n个人全部拍错,即求n错排. 要求:求出其全部错排发生的概率 n错排 / n! * 100  以小数形式输出即可. #include ...

  2. 锋利的jQuery-4--图片切换的一个例子（自己理解后写的，以备忘记时看看）

    一个动画切换的效果,如图: 分析步骤: 1.点击左右的箭头图片滚动,左边的小点变化. 2.主要问题是当滚到最后一屏时切换回第一屏,第一屏在向前滚动是切换到最后一屏 :通过判断图片的总数然后除以每屏显示 ...

  3. Nonove js timer 计时器

    <html> <head> <title> Nonove js timer 计时器 </title> </head> <body> ...

  4. php-fpm.conf两个至关重要的参数

    这里规定了PHP-CGI的连接.发送和读取的时间,300秒足够用了,因此我的服务器很少出现504 Gateway Time-out这个错误.最关键的是php-fpm.conf的设置,这个会直接导致50 ...

  5. C#中Delegate和Event以及它们的区别（转载）

    一.Delegate委托可以理解为一个方法签名. 可以将方法作为另外一个方法的参数带入其中进行运算.在C#中我们有三种方式去创建委托,分别如下: public delegate void Print( ...

  6. C++ 中map 中迭代器的简单使用：

    public member function <map> std::map::find iterator find (const key_type& k); const_itera ...

  7. jQuery基础细节

    使用CDN版的jQuery         用托管在公共CDN(Content Delivery Network,内容分发网络)上的jQuery库,CDN是一种内容分发网络,当用户请求其数据时,CDN ...

  8. emmet-vim

    最近啊,我投奔了网页的开发,看了一本<head first HTML and CSS>的书,感觉非常不错,然后又配置了一些vim里面用到的插件,现在我把学习到的东西记录下来! 首先,我不会 ...

  9. cad2013

    ## ribbon界面? ribbon界面是一种设计ui, 可以认为是传统的  菜单和工具栏  组合. 是 用于 实时显示 + 面向结果的 设计ui 但并不是所有的程序都适合.  ribbon 并不是 ...

  10. 利用ADSL拨号上网方式如何搭建服务器

    序:搭建服务器需要两个条件硬件服务器和固定公网IP,随便一台个人电脑都可以作为硬件服务器,就剩下一个问题,如何获得一个固定公网IP. 第一章 扫盲:ADSL拨号上网方式,本地IP与公网IP的区别 一. ...