废话少说，上代码

<!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. Orcle学习（一）

    exists"和"in"的效率问题 1) select * from T1 where exists(select 1 from T2 where T1.a=T2.a) ...

  2. vsftp 根据用户设置

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

  3. JS定时程序，设定一个一直刷新，又时间间隔的js，读取当前的时间并显示

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  4. python 常用高效代码写法集锦

    一.打开文件 #使用 with 语句操作文件对象 with open(r'somefileName') as somefile: for line in somefile: print line # ...

  5. MySQL临时表创建

    和SQL SERVER 创建临时表不同 不能直接写 Create table #Test_Table 而是需要在 Create 和 table 之间 加入 TEMPORARY(temporary< ...

  6. PAT 乙级 1005. 继续(3n+1)猜想 (25)

    1005. 继续(3n+1)猜想 (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B   卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情 ...

  7. zt：synpify 综合，保持信号，时序处理

    http://www.actel.com/kb/article.aspx?id=TT1002 Logic Replication vs. Preserve Attributes in Synplici ...

  8. vs2010 创建预编译头 Debug 正常 Release Link Error问题解决

    问题:创建预编译头 Debug 正常 Release Link Error Main.obj : error LNK2005: ___@@_PchSym_@00@UmfilkilqUdrmzkkUki ...

  9. 使用用Generic.xaml加载默认的主题资源

    把Resource嵌入到Generic.xaml文件中,并把该文件放到应用程序的Themes主题文件夹下面,这们Generic.xaml文件中的资源就可以被系统识别为默认主题一部分,从而进行使用. 为 ...

  10. offer

    八月份仿真实验室国赛以后,我并没有开始做一些关于找工作的准备,而是在做自己感兴趣的cocos2d-x,大概花了一个星期的时间从安装平台到查资料写了一个flappybird小游戏,将近开学了才把找工作的 ...