废话少说，上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>测试 查找下一个元素</title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#menu ul li:first ul").show();

            $("#menu ul li:gt(0) ul").hide();

            $("#menu li a.parentMenu").click(function () {

                if ($(this).next(".childMenu").is(":hidden")) {

                    $("ul .childMenu").hide();

                    $(this).next(".childMenu").show();

                }

                else {

                    $("ul .childMenu").hide();

                    $(this).next(".childMenu").hide();

                }

            });

        });

    </script>

</head>

<body>

    <div id="menu">

        <ul>

            <li><a href="#" class="parentMenu">一级菜单A</a>

                <ul class="childMenu">

                    <li>A的子菜单</li>

                    <li>A的子菜单</li>

                    <li>A的子菜单</li>

                    <li>A的子菜单</li>

                </ul>

            </li>

            <li><a href="#" class="parentMenu">一级菜单B</a>

                <ul class="childMenu">

                    <li>B的子菜单</li>

                    <li>B的子菜单</li>

                    <li>B的子菜单</li>

                    <li>B的子菜单</li>

                </ul>

            </li>

            <li><a href="#" class="parentMenu">一级菜单C</a>

                <ul class="childMenu">

                    <li>C的子菜单</li>

                    <li>C的子菜单</li>

                    <li>C的子菜单</li>

                    <li>C的子菜单</li>

                </ul>

            </li>

            <li><a href="#" class="parentMenu">一级菜单D</a>

                <ul class="childMenu">

                    <li>D的子菜单</li>

                    <li>D的子菜单</li>

                    <li>D的子菜单</li>

                    <li>D的子菜单</li>

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>

　　做一个笔记，主要记一下jQuery选择器  如何选中 下一个元素，如何选择 元素集中指定某个或者某几个元素

jQuery 菜单栏 展开与收缩例子的更多相关文章

  1. jQuery 当前展开其他收缩 三级下拉菜单（转载）

    jQuery可展开收缩三级下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. jquery 菜单展开与收缩参考脚本

    /* * metismenu - v1.1.3 * Easy menu jQuery plugin for Twitter Bootstrap 3 * https://github.com/onoku ...

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

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

  4. Ext.grid rowexpander的展开与收缩

    这里写Ext.grid.Panel的展开与收缩. 1. 确保在grid存在rowexpander对象: plugins: [{ ptype: 'rowexpander', rowBodyTpl: [' ...

  5. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  7. DataGridView之行的展开与收缩

    很多数据都有父节点与子节点,我们希望单击父节点的时候可以展开父节点下的子节点数据. 比如一个医院科室表,有父科室与子科室,点击父科室后,在父科室下面可以展现该科室下的所有子科室. 我们来说一下在Dat ...

  8. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  9. ios知识点总结——UITableView的展开与收缩及横向Table

    UITableVIew是iOS开发中使用最为广泛的一种控件,对于UITableView的基本用法本文不做探讨,本文主要是针对UITableView的展开与收缩进行阐述,在文章的后面也会探讨一下横向ta ...

随机推荐

  1. MacBook下如何安装mysql-python

    解决方法: 先把之前装的卸载干净:pip uninstall mysql-pythonbrew uninstall mysql-connector-c 现在设置下mysql_config路径:首先修改 ...

  2. 用ARCGIS配出一张DEM专题图

    专题图是指突出而尽可能完善.详尽地表达制图区内的一种或几种自然或社会经济要素的地图.专题图的制图领域宽广,凡具有空间属性的信息数据都可以用其来表示.由于DEM描述的是地面高程信息,它在测绘.水文.气象 ...

  3. vsftp 根据用户设置

    #vsftpd.conf ###############pam_service_name=vsftpduserlist_enable=YEStcp_wrappers=YESlocal_root=/da ...

  4. Setup QT 5.5.1 + OpenCV 3.0 + Visual Studio 2013 on windows 10

    1. Install Visual studio 2013 community version which is free to use for personal usage. 2. Setup th ...

  5. 实现iframe 全屏显示

    componentDidMount(){var elem = document.getElementById('iframe');; var elem = document.getElementByI ...

  6. cakephp 打印出SQL语句

    最近一直在使用cakephp这个框架学习,最近发现了一些问题,就是怎样将SQL语句打印出来进行调试,方法如下: $db=ConnectionManager::getDataSource('defaul ...

  7. 动态设置和访问cxgrid列的Properties（转）

    原文:http://www.cnblogs.com/hnxxcxg/archive/2010/05/24/2940711.html 动态设置和访问cxgrid列的Properties 设置: cxGr ...

  8. 转载：java程序打包成jar 配置文件信息路径

    一个普通的java project,里面引用了config.properties配置文件,将项目打成Runnable jar,然后将config.properties放到打包后的jar路径下,执行该j ...

  9. 如何在真机装linux(本人在台式机上又添了个硬盘)

    首先呢,本人就是小渣渣,所以对于装ubuntu在真机,刚开始真不知道如何下手,以前只是在虚拟机中装过,在经过查阅各种资料后,成功安装,我的台式机本身装的系统win7,是下面就是我安装的过程啦 1. 我 ...

  10. AngulaJS路由 ui-router 传递多个参数

    定义路由: .state('txnresult', { url: '/txnresult/:originAmount/:finalAmount/:currentPoint/:txnId/:discou ...