废话少说，上代码

<!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. master-slave

    Redis的master/slave数据复制方式可以是一主一从或者是一主多从的方式,Redis在master是非阻塞模式,也就是说在slave执行数据同步的时候,master是可以接受客户端的请求的, ...

  2. ActiveMQ安装

    安装环境: 逛网下载最新安装包,ubuntu下解压sudo tar -zxvf xx.tar.启动activeMQ. 报错如下: 原因是没有找到java命令位置,编辑启动配置文件: 再次启动,完成后进 ...

  3. sql server2008安装说明 详细完整版

    SQL Server 2008是一个重大的产品版本,它推出了许多新的特性和关键的改进,使得它成为至今为止的最强大和最全面的SQL Server版本. 在现今数据的世界里,公司要获得成功和不断发展,他们 ...

  4. RandomAccessFile使用小结

    本文是基于Linux环境运行,读者阅读前需要具备一定Linux知识 RandomAccessFile是Java输入/输出流体系中功能最丰富的文件内容访问类,既可以读取文件内容,也可以向文件输出数据.与 ...

  5. html5+css 图片自适应

    <div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;"> ...

  6. VUE 入门基础(4)

    四,计算属性 基础例子 <div id='example'> <p>0riginal message: "{{message}}"</p> &l ...

  7. 第二次C语言作业

    实验一:判断成绩等级. 给定一百分制成绩,要求输出成绩的等级.90以上为A,80-89为B,70-79为C,60-69为D,60分以下为E,输入大于100或小于0时输出"输入数据错误&quo ...

  8. avalon全选效果分析讲解

    全选功能就是 1.点击全选控制循环元素是否选中.(点击全选,下面的所有元素选中,再次点击 所有元素取消选中.) 2.点击循环元素控制全选.(如果当前元素是未选中状态则全选不选中,如果当前元素是选中状态 ...

  9. stapes文档翻译

    1.引言 写一个Stapes 模型如下:    2.创建方法 这些方法用来帮助创建和扩展类或模块.这些术语在文档中可交换的. subclass Module.subclass([object]) st ...

  10. JS里面利用random（）实现随机颜色更换

    首先你需要一个div <div id="box"></div> 然后给这个div加入CSS属性 #box{width:500px;height:500px; ...