废话少说，上代码

<!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. HTTP 错误500.19 -Internal Server Error 错误代码 0x80070021

    转自:http://blog.csdn.net/goux_s/article/details/5676689 错误摘要 HTTP 错误500.19 -Internal Server Error 无法访 ...

  2. java 获取当月第一天和最后一天 获取前一个月第一天和最后一天

    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");                    //获取前月的第一 ...

  3. PHP中类自动加载的方式

    最近在学习composer,发现从接触PHP到现在已经遇到了三种关于PHP中类的自动加载方式,这其中包括PHP自带的类的自动加载方式.PHP的第三方的依赖管理工具composer的加载方式以及PHP的 ...

  4. sys模块和os模块，利用sys模块生成进度条

    sys模块import sysprint(sys.argv)#sys.exit(0)             #退出程序,正常退出exit(0)print(sys.version)       #获取 ...

  5. android 开发 程序中下载安装APK文件 问题汇总 解析程序包时出现问题

    1 若把APK文件保存到应用程序的files目录下,则一定注意保存时使用 FileOutputStream os = openFileOutput(fileName, MODE_WORLD_READA ...

  6. ios UINaviBar 去除分割线

    //For a custom shadow image to be shown, custom background image must also be set with the setBackgr ...

  7. 开启macbook win7触控屏右键

    开启macbook win7触控屏右键,如下图

  8. 在php里写sql查询需要注意的事情

    ---恢复内容开始--- 今天往php里写了一条sql查询, $sql = "select * from videos where vuser=".$u: $ret = mysql ...

  9. django框架的models

    在django的框架设计中采用了mtv模型,即Model,template,viewer Model相对于传统的三层或者mvc框架来说就相当对数据处理层,它主要负责与数据的交互,在使用django框架 ...

  10. sftp上传 - 待完

    1.搭建本地sftp 1.1.下载msftpsrvr.exe软件 下载地址:http://www.download3k.com/Install-Core-FTP-Mini-SFTP-Server.ht ...