废话少说，上代码

<!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. OAF屏蔽的错误

    ORACLE EBS中OAF屏蔽的错误 ORACLE EBS R12中引入了XML Publisher,Oracle Application Framework等新东西,利用网页/JSP技术增强For ...

  2. Hive的安装

    Hive的安装   第一步:解压并安装:第二步:配置 1)root用户下,解压后,改名为hive,并将hive文件夹赋给hadoop用户 tar -zxvf hive-0.9.0.tar.gz -C ...

  3. 一些对数学领域及数学研究的个人看法（转载自博士论坛wcboy）

    转自:http://www.math.org.cn/forum.php?mod=viewthread&tid=14819&extra=&page=1 原作者: wcboy 现在 ...

  4. Xslt 1.0中使用Array

    XSLT Variable Arrays I recently answered a question on a popular programmers forum about how to stor ...

  5. information_schema系列八(事物，锁)

    今天我们主要看一下MySQL information_schema里面的关于innodb的锁和事物的两三个系统表: 看一下锁对应的sql: select * from innodb_lock_wait ...

  6. 【英语魔法俱乐部——读书笔记】 0 序&前沿

    [英语魔法俱乐部——读书笔记] 0 序&前沿   0.1 以编者自身的经历引入“不求甚解,以看完为目的”阅读方式,即所谓“泛读”.找到适合自己的文章开始“由浅入深”的阅读,在阅读过程中就会见到 ...

  7. jquery 序列化

    //生成发件人Json信息 function buildSenderInfoJson() { var sendName = $("#SendName").val(); var se ...

  8. ARCGIS Server 发布服务时出现的问题解决

    target='CFH.ConfigurationFactoryHost'  machine='IBM3850X5'  thread='24072'  elapsed='0.31200'>Ser ...

  9. 修改server 2008远程桌面端口

    在“开始”-"运行"菜单里,输入regedit HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Terminal Serve ...

  10. 利用docker compose启动gitlab及runner

    添加docker compose配置文件 新建文件docker-compose.yml,输入如下内容: gitlab: image: 'gitlab/gitlab-ce:latest' contain ...