<!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. hadoop运行流程分析源代码级

    前言: 最近一直在分析hadoop的运行流程,我们查阅了大量的资料,虽然从感性上对这个流程有了一个认识但是我总是感觉对mapreduce的运行还是没有一个全面的认识,所以决定从源代码级别对mapred ...

  2. Linux kernel ‘xfs_attrlist_by_handle()’函数缓冲区溢出漏洞

    漏洞名称: Linux kernel ‘xfs_attrlist_by_handle()’函数缓冲区溢出漏洞 CNNVD编号: CNNVD-201311-392 发布时间: 2013-11-29 更新 ...

  3. word 中Sentences、Paragraph等含义和用法

    word 中有Words,Characters,Sentences.Paragraph,Sections 具体含义如下表达式             含义   返回的对象 Words(index)  ...

  4. HTMLPARSER.NET 参考资料

    例子1: using System;using System.IO;using Winista.Text.HtmlParser;using Winista.Text.HtmlParser.Lex;us ...

  5. eclipse 修改设置Ctrl+Shift+F长度

    在window的Preferences中的Java->Code Style->Formatter 到了这一步就是找到Ctrl+Shift+F的格式化模板了,这里不能直接修改.因为是ecli ...

  6. [liu yanling]测试流程

    测试流程 1.制定测试计划 2.编辑测试用例 3.执行测试用例 4.发现并提交BUG 5.开发组修正BUG 6.对已修正BUG进行返测 7.修正完成的BUG将状态置为已关闭,未正确修正的BUG重新激活

  7. 【CSS】Beginner3:Color

    1.red rgb(255,0,0) rgb(100%,0%,0%) #ff0000 #f00 2.Predefined color name aqua, black, blue, fuchsia, ...

  8. Codevs 1222 信与信封问题 二分图匹配,匈牙利算法

    题目: http://codevs.cn/problem/1222/ 1222 信与信封问题   时间限制: 1 s   空间限制: 128000 KB   题目等级 : 钻石 Diamond 题解 ...

  9. Hadoop新手学习线路指导

    对于我们新手入门学习hadoop大数据存储的朋友来说,首先了解一下云计算和云计算技术是有必要的.下面先是介绍云计算和云计算技术的:              云计算,是一种基于互联网的计算方式,通过这 ...

  10. [转]2-SAT问题及其算法

    转自:http://www.cppblog.com/MatoNo1/archive/2011/07/13/150766.html [2-SAT问题]现有一个由N个布尔值组成的序列A,给出一些限制关系, ...