<!DOCTYPE html>

<html>

<head>

    <title> New Document </title>

    <meta charset="utf-8" />

    <style>

        h2 {margin: 0; padding: 0;}

        #ul1 ul {display: none;}

        #ul1 .next {color: red;}

    </style>

    <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>

    <script>

        $(function(){

            $('#ul1 li').find('h2').click(function(){

                var oUl = $(this).parent().find('ul')[0];

                var aUl = $(this).parent().siblings('li').find('ul');

                $(aUl).slideUp();

                $(aUl).not(oUl).attr('bClk',false);

                if($(oUl).attr('bClk')=='true'){

                    $(oUl).slideUp().attr('bClk',false);

                    $(oUl).find('ul').slideUp().attr('bClk',false);

                }else{

                    $(oUl).slideDown().attr('bClk',true);

                }

            })

        });

    </script>

</head>

<body>

    <ul id="ul1">

        <li><h2>1111</h2></li>

        <li><h2 class="next">2222</h2>

            <ul>

                <li><h2 class="next">aaaa</h2>

                    <ul>

                        <li><h2>aaaa</h2></li>

                        <li><h2>bbbb</h2></li>

                        <li><h2>cccc</h2></li>

                        <li><h2>dddd</h2></li>

                    </ul>

                </li>

                <li><h2 class="next">aaaa</h2>

                    <ul>

                        <li><h2>aaaa</h2></li>

                        <li><h2 class="next">bbbb</h2>

                            <ul>

                                <li><h2>aaaa</h2></li>

                                <li><h2>bbbb</h2></li>

                                <li><h2>cccc</h2></li>

                                <li><h2>dddd</h2></li>

                            </ul>

                        </li>

                        <li><h2 class="next">cccc</h2>

                            <ul>

                                <li><h2>aaaa</h2></li>

                                <li><h2>bbbb</h2></li>

                                <li><h2>cccc</h2></li>

                                <li><h2>dddd</h2></li>

                            </ul>

                        </li>

                        <li><h2>dddd</h2></li>

                    </ul>

                </li>

                <li><h2>cccc</h2></li>

                <li><h2>dddd</h2></li>

            </ul>

        </li>

        <li><h2 class="next">3333</h2>

            <ul>

                <li><h2 class="next">aaaa</h2>

                    <ul>

                        <li><h2>aaaa</h2></li>

                        <li><h2>bbbb</h2></li>

                        <li><h2>cccc</h2></li>

                        <li><h2>dddd</h2></li>

                    </ul>

                </li>

                <li><h2 class="next">aaaa</h2>

                    <ul>

                        <li><h2>aaaa</h2></li>

                        <li><h2>bbbb</h2></li>

                        <li><h2>cccc</h2></li>

                        <li><h2>dddd</h2></li>

                    </ul>

                </li>

                <li><h2>cccc</h2></li>

                <li><h2>dddd</h2></li>

            </ul>

        </li>

        <li><h2>4444</h2>

        </li>

    </ul>

</body>

</html>

来源：http://bbs.miaov.com/forum.php?mod=viewthread&tid=6112&page=1#pid16332

JavaScript无限极菜单的更多相关文章

  1. bootstrap 无限极菜单

        <ul class='wraplist' >           <li class="open">                <a hr ...

  2. PHP无限极菜单

    权限表结构 CREATE TABLE `blog_auth` ( `id` ) unsigned NOT NULL AUTO_INCREMENT COMMENT '序号', `pid` ) NOT N ...

  3. layui动态无限极菜单

    ajax加jQuery实现 效果图 参考文章:https://www.wanpishe.top/detail?blogId=644aa177-9795-456a-8090-ee1264bf5d9d

  4. javascript 函数 add(1)(2)(3)(4)实现无限极累加 —— 一步一步原理解析

    问题:我们有一个需求,用js 实现一个无限极累加的函数, 形如 add(1) //=> 1; add(1)(2)  //=> 2; add(1)(2)(3) //=>  6; add ...

  5. PHP实现菜单无限极分类

    菜单数据 这里我们的菜单数据是临时数据, 没有从数据库中查询处理,数据基本和数据库中的的相似. 数据如下: $items = array( 1 => array('id' => 1, 'p ...

  6. sqlalchemy tree 树形分类 无限极分类的管理。预排序树，左右值树。sqlalchemy-mptt

    简介: 无限极分类是一种比较常见的数据格式,生成组织结构,生成商品分类信息,权限管理当中的细节权限设置,都离不开无限极分类的管理. 常见的有链表式,即有一个Pid指向上级的ID,以此来设置结构.写的时 ...

  7. js实现无限极分类

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要实现部门通讯录,后台传来的数据是直接从数据库里拿的部门表,所以没有层级分类,只有parentId表示从属关系,所以分类的事情就交给我来 ...

  8. C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现之方法二：加入缓存机制

    在上一篇文章中我用递归方法实现了管理菜单,在上一节我也提到要考虑用缓存,也算是学习一下.Net Core的缓存机制. 关于.Net Core的缓存,官方有三种实现: 1.In Memory Cachi ...

  9. PHP无限极分类

      当你学习php无限极分类的时候,大家都觉得一个字“难”我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究. 到网上一搜php无限极分类,很多,但好多都是一个,并且,写的很乱, ...

随机推荐

  1. 【转】MFC中用CFile读取和写入文件2

    原文网址:http://blog.sina.com.cn/s/blog_623a7fa40100hh1u.html CFile提供了一些常用的操作函数,如表1-2所示. 表1-2  CFile操作函数 ...

  2. linux下passwd命令设置修改用户密码

    1.passwd 简单说明: 我们已经学会如何添加用户了,所以我们还要学习设置或修改用户的密码:passwd命令的用法也很多,我们只选如下的几个参数加以说明:想了解更多,请参考man passwd或p ...

  3. imdisk命令行使用及配置

    imdisk是一个开源的虚拟磁盘软件,集虚拟光驱,文件虚拟光驱,映射物理磁盘,映射物理内存等功能 如果使用devio--Device I/O Service,可以映射网络磁盘等. 通用于windows ...

  4. 增加eclipse启动的Tomcat内存的方法 tomcat内存增加

    增加eclipse启动的Tomcat内存的方法 Tomcat一般默认情况下最大最优内存设置为2G 这种情况下,修改Tomcat\bin\catalina.bat,添加如下内容 set JAVA_OPT ...

  5. 五指CMS开发日志（一）

    开发了这么长时间,基本功能已经具备了.分享一下后台的界面吧.

  6. HW5.18

    public class Solution { public static void main(String[] args) { System.out.printf("%s\t%s\n&qu ...

  7. HW2.15

    public class Solution { public static void main(String[] args) { double rate = 0.05; double balance ...

  8. pytho

    字符串格式化:求模操作符%可以用来将其他值转换为包含转换标志的字符串,对值进行不同方法的格式化,左右对齐,字段宽度精度,增加符号,左填充数字 字符串方法join split istitle capit ...

  9. poj 1438--One-way Traffic（边的双连通）

    给定一个图,并给定边,a b c(c==1||c==2) 表示ab之间有c条边 求把尽可能多的有向边定向变成强联通图. 先把图当做无向图,加边时记录是否有边,dfs的时候不要把本没有的边用到!因为这个 ...

  10. 不只是打车软件，中国车主们赋予了Uber更多意义

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...