<!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. poj2723

    把每对钥匙看做一个变量,那两个钥匙看做他的两个状态 每一个开门的要求就是一个条件(xi or xj) 很显然有了2sat的基本要素 2sat是一个判定性问题,而这题求最多能过几个门: 不难想到二分答案 ...

  2. 【转】让itunes下载加速的真正办法，转向至香港台湾澳门苹果服务器 -- 不错不错！！！

    原文网址:http://bbs.feng.com/read-htm-tid-2397269.html 今天,看了一个这个帖子是改dns的,http://bbs.feng.com/read-htm-ti ...

  3. Selenium 实现联想下拉框

    直接在文本框输入字符,并不能实现联想下拉框, 第一种方式:强制执行js driver.FindElement(By.Id("top_search_input")).SendKeys ...

  4. js定义函数的几种结构形式

    1.函数声明 function name(参数) { 执行的代码 } 2.函数表达式 也称匿名函数 var x = function (参数) { 执行的代码 }; //第二种方式按照完整的语法需要在 ...

  5. Eclipse 卸载插件

    直奔主题,不罗嗦! 1.help 2.about eclipse 3. 点击Installation Details 4.选中你安装的插件点击Uninstall... 5.从新启动,OK.

  6. wuzhicms查找：当前页面使用的哪个文件

    要查看这个地址的模版.http://www.wuzhicms.com/item-34-2-1.html 首先,我们的这个地址需要是动态的.而不是生成的静态地址. 打开文件: /www/configs/ ...

  7. POJ2407–Relatives(欧拉函数)

    题目大意 给定一个正整数n,要求你求出所有小于n的正整数当中与n互质的数的个数 题解 欧拉函数模板题~~~因为n过大~~~所以直接用公式求 代码: #include<iostream> # ...

  8. eclipse老是卡在Refreshing workspace

    最近老是遇到eclipse没有响应,参考网络上的相关帖子做了些优化,但问题依旧. 后来发现出现这个问题一般都是eclipse无响应,直接结束进程后导致的,看了下eclipse日志,果真如此. !SES ...

  9. windows蓝屏代码大全及常见蓝屏解决方案

    对于以下的代码查询建议使用ctrl+F查询,而且很多蓝屏与黑屏的问题多是最近操作引起的,例如更新驱动,安装新的硬件.软件--把相关的配置调到最近的正常状况大多可以解决,确实不行时方可考虑重装系统,解决 ...

  10. Android中解析JSON格式数据常见方法合集

    待解析的JSON格式的文件如下: [{"id":"5", "version":"1.0", "name&quo ...