<!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. 常用的Web服务器

    常用的Web服务器有IIS.Apache.Tomcat.Jboss.Resin.Weblogic.WebSpher IISIIS服务是Windows产品自带的一种免费的Web服务器,安装配置简单,主要 ...

  2. 【转】【iOS知识学习】_视图控制对象生命周期-init、viewDidLoad、viewWillAppear、viewDidAppear、viewWillDisappear等的区别及用途

    原文网址:http://blog.csdn.net/weasleyqi/article/details/8090373 iOS视图控制对象生命周期-init.viewDidLoad.viewWillA ...

  3. Google Chrome中的高性能网络(二)

    Chrome Predictor的预测功能优化 Chrome会随着使用变得更快. 它这个特性是通过一个单例对象Predictor来实现的.这个对象在浏览器内核进程(Browser Kernel Pro ...

  4. oracle sys sysman system 介绍

    Oracle数据库中SYS.SYSTEM.DBSNMP.SYSMAN四用户的区别 SYS用户: SYS,默认密码为CHANGE_ON_INSTALL,当创建一个数据库时,SYS用户将被默认创建并授予D ...

  5. 如何使用 RDP 或 SSH 连接到 Azure 虚拟机

    使用 RDP 或 SSH 连接到 Azure 虚拟机 本文简要概述了如何使用远程桌面控制协议 (RDP) 或安全外壳(Secure Shell,SSH)客户端登录 Azure 虚拟机.它还包括要求和故 ...

  6. eas bos 编辑界面 editUIt 属性值为空

    在编辑界面,我们可以正常的保存某个值到数据库,同时列表界面也可以正常显示. 但是当我们再次打开这个编辑界面的时候,该属性值缺无法显示. 通常情况下,通过下面两个方法可以解决 方法一: 在编辑界面重写一 ...

  7. usb 设备的端点 及输入输出方向

  8. .Net设计模式_开篇

    前言 其实以前看过两次设计模式,现在想来,几乎已经对设计模式没有任何印象,说明根本没有理解.或者说几乎不用,所以我除了单列.工厂外的设计模式几乎全部忘记了.最近需要写一个引擎,想用UML设计整体的架构 ...

  9. Fast特征检测

    一.Fast算法 1.基本原理 Fast特征点检测feature2D原理是在圆周上按顺时针方向从1到16的顺序对圆周像素点进行编号.如果在圆周上有N个连续的像素的亮度都比圆心像素的亮度Ip加上阈值t还 ...

  10. C#如何转换2位数字表示的年

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:C#如何转换2位数字表示的年.