<!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. Xcode 配置常用变量（SRCROOT, PROJECT_DIR, PROJECT_NAME）

    https://developer.apple.com/library/mac/documentation/DeveloperTools/Reference/XcodeBuildSettingRef/ ...

  2. HDU5653 Bomber Man wants to bomb an Array 简单DP

    题意:bc 77 div1 1003(中文题面) 分析:先不考虑将结果乘以 1e6. 设 dp[i] 为从前 i 个格子的状态可以获得的最大破坏指数. 那么我们可以枚举每个炸弹,该炸弹向左延伸的距离和 ...

  3. [liu yanling]黑盒测试用例设计方法

    1. 概述 黑盒测试用例设计方法包括等价类划分法.边界值分析法.错误推测法.因果图法.判定表驱动法.正交试验设计法.功能图法等. 2. 等价类划分法 2.1.          概念 等价类划分法是把 ...

  4. selenium1.0和selenium2.0页面等待处理详解

    一.selenium1.0页面等待 1.……AndWait 经常会看到, selenium action命令中很多有这种……AndWait后缀, 例如click和clickAndWait命令: cli ...

  5. Bootstrap基本使用[转]

    Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码).Bootstrap提供了全面的基本及组件样式并自带了13个jQuer ...

  6. sqoop的安装和使用

    在sqoop使用前,应先安装好hive和zookeeper,还要在一台虚拟机里安装好mysql 1.先将zookeeper启动:zkServer.sh start,集群启动起来:start-all.s ...

  7. The Moving Points

    Problem Description There are N points in total. Every point moves in certain direction and certain ...

  8. 最小生成树之kruskal方法实现 (java)

    今天是个阴天,下了点雨,work ......... 步骤:将所有边排序,然后不断从小到大加上边,这个过程最重要的是避免环的产生,此处用并查集.(nyoj 38) package 最小生成树; imp ...

  9. AABB碰撞盒

    矩形边界框(转) 另一种常见的用来界定物体的几何图元是矩形边界框,矩形边界框可以是与轴对齐的或是任意方向的.轴对齐矩形边界框有一个限制,就是它的边必须垂直于坐标轴.缩写AABB常用来表示axially ...

  10. oracle 中的truncate 和delete

    一.查询表大小,块多少语句 Select SEGMENT_Name,BYTES,BLOCKS,Extents From dba_segments Where segment_name In('BAI_ ...