JavaScript无限极菜单
<!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无限极菜单的更多相关文章
- bootstrap 无限极菜单
<ul class='wraplist' > <li class="open"> <a hr ...
- PHP无限极菜单
权限表结构 CREATE TABLE `blog_auth` ( `id` ) unsigned NOT NULL AUTO_INCREMENT COMMENT '序号', `pid` ) NOT N ...
- layui动态无限极菜单
ajax加jQuery实现 效果图 参考文章:https://www.wanpishe.top/detail?blogId=644aa177-9795-456a-8090-ee1264bf5d9d
- javascript 函数 add(1)(2)(3)(4)实现无限极累加 —— 一步一步原理解析
问题:我们有一个需求,用js 实现一个无限极累加的函数, 形如 add(1) //=> 1; add(1)(2) //=> 2; add(1)(2)(3) //=> 6; add ...
- PHP实现菜单无限极分类
菜单数据 这里我们的菜单数据是临时数据, 没有从数据库中查询处理,数据基本和数据库中的的相似. 数据如下: $items = array( 1 => array('id' => 1, 'p ...
- sqlalchemy tree 树形分类 无限极分类的管理。预排序树，左右值树。sqlalchemy-mptt
简介: 无限极分类是一种比较常见的数据格式,生成组织结构,生成商品分类信息,权限管理当中的细节权限设置,都离不开无限极分类的管理. 常见的有链表式,即有一个Pid指向上级的ID,以此来设置结构.写的时 ...
- js实现无限极分类
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要实现部门通讯录,后台传来的数据是直接从数据库里拿的部门表,所以没有层级分类,只有parentId表示从属关系,所以分类的事情就交给我来 ...
- C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现之方法二：加入缓存机制
在上一篇文章中我用递归方法实现了管理菜单,在上一节我也提到要考虑用缓存,也算是学习一下.Net Core的缓存机制. 关于.Net Core的缓存,官方有三种实现: 1.In Memory Cachi ...
- PHP无限极分类
当你学习php无限极分类的时候,大家都觉得一个字“难”我也觉得很难,所以,现在都还在看,因为工作要用到,所以,就必须得研究研究. 到网上一搜php无限极分类,很多,但好多都是一个,并且,写的很乱, ...
随机推荐
- API函数
1. API之网络函数 WNetAddConnection 创建同一个网络资源的永久性连接 WNetAddConnection2 创建同一个网络资源的连接 WNetAddConnection3 创建同 ...
- Nagios ’status.cgi‘文件权限许可和访问控制漏洞
漏洞名称: Nagios ’status.cgi‘文件权限许可和访问控制漏洞 CNNVD编号: CNNVD-201307-013 发布时间: 2014-02-21 更新时间: 2014-02-21 危 ...
- SVN Working Copy xxx locked 并 cleanup失败之解
从cmd 进入到 workspace文件夹 执行 上边的命令 --------------------------------------------------------------------- ...
- vim配置vimrc详解
vimrc的存放位置: 系统 vimrc 文件: "$VIM/vimrc" 用户 vimrc 文件: "$HOME/.vimrc" 用户 exrc 文件: &q ...
- Android Studio 导入项目错误
Gradle DSL method not found: 'Android()' 错误原因: android studio 引进项目时,自动查找本机是否有项目设置的SDK版本,若发现没有,我们会在pr ...
- POJ2429 - GCD & LCM Inverse(Miller–Rabin+Pollard's rho)
题目大意 给定两个数a,b的GCD和LCM,要求你求出a+b最小的a,b 题解 GCD(a,b)=G GCD(a/G,b/G)=1 LCM(a/G,b/G)=a/G*b/G=a*b/G^2=L/G 这 ...
- 通过一张简单的图，让你彻底地搞懂JS的==运算
大家知道,JavaScript中的==是一种比较复杂运算,它的运算规则很奇怪,很容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读ECMAScript规范的基础上,我画了一 ...
- smarty对网页性能的影响--开启opcache
在上一篇<smarty对网页性能的影响>中,默认没有开启opcache,于是我安装了一下zend opcache扩展,重新实验了一下,结果如下: 有smarty 用apache的ab命令进 ...
- firefox和chrome对于favicon.ico关于content-security-policy的不同处理
1.favicon.ico是网站的title图标 2.在设置CSP时,举例如下,表示只允许来源为https://my.alipay.com的图片,如果不是,则向指定的url(report.php)发出 ...
- csdn 刷分小工具(刷了1000多被封了,慎用)
先上图,周第一, 月第六代码未整理,比较乱,仅仅供参考(cookie已经废了,号被封了,哈哈) using System; using System.Collections.Generic; usin ...