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无限极分类,很多,但好多都是一个,并且,写的很乱, ...
随机推荐
- MVC——数据库增删改查(aspx)
MVC: V(View) :视图→就是页面的模板 C(Control): 控制器→客户主要面对的就是控制器, M(Model):模板→在模板里面主要就是写关于数据库的各种增删改查的方法 它们之间的关系 ...
- ☀【window.self / window.parent / window.top】
Js中的window.parent ,window.top,window.self 详解 √http://blog.csdn.net/zdwzzu2006/article/details/604763 ...
- 终极秘籍教你怎么找回被盗iPhone 查询ICCID
iPhone不慎丢失后怎么办?普通青年:立刻报警,基本没用.文艺青年:用Find my iPhone查找位置.但那只是个大概位置,iPhone关机后更是没戏,接着是用iCloud锁定手机,发送警告信息 ...
- lightoj 1013
思路:动态规划.设dp[i][j][k]表示用第一个串的前i隔字符和第二个串的前k隔字符组成长度为i的串的个数,那么:若s1[j+1] == s2[k+1] dp[i+1][j+1][k+1] += ...
- POJ 3013
思路:ans = 每条边(u,v)*v的子树节点的w = 所有的dist[v]*w[v]之和; #include<iostream> #include<queue> #incl ...
- Visual Studio 2015 下载地址
Visual Studio 2015 发行说明: https://visualstudio.com/zh-cn/news/vs2015-vs.aspx Visual Studio 2015 特性简 ...
- oracle自动执行一个sql文件的脚本
如图 文件夹 打开文件夹,如图 autoExeSyn-local.bat文件里的内容如下 @echo off -----------用户/密码-实例-------------执行的sql文件---&g ...
- 关于Windows Azure的常见问题-一般问题FAQ
一般问题 什么是Windows Azure? Windows Azure 是一个灵活而开放的云平台,通过该平台,您可以在数据中心快速生成.部署和管理应用程序.Windows Azure 支持所有主流操 ...
- MVC client validation after PartialView loaded via Ajax MVC3中 弹出 Dialog时候 提交的时候 使用 Jquery 不验证 form表单 的解决办法
I came across this scenario whereby my main View uses Ajax posts to retrieve PartialViews and delive ...
- 开始使用storm
开始使用storm 本章将讲述如何安装.部署.启动和停止 Storm 集群. Storm 的安装比较简单,但在安装 Storm 之前需要做好充足的准备,本章将介绍安装的整个流程.在官网上可以下载到S ...