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无限极分类,很多,但好多都是一个,并且,写的很乱, ...
随机推荐
- diamond专题（四）—— 容灾机制
大家好,本次为大家带来diamond的容灾机制. diamond之所以表现的稳定可靠,除了架构简单之外,另一个重要原因是diamond具有一套完备的容灾机制,容灾机制涉及到client和server两 ...
- From delegates to lambdas z
I thought of naming this post “Evolution of lambdas in C#”, then I decided that wouldn’t be closest ...
- linux网站配置文件.htaccess伪静态转换到IIS web.config中
linux下的php网站放到Windows服务器IIS下.htaccess文件伪静态规则转换. 此办法只适合于linux下的php网站放到Windows服务器IIS下,网站除了主页面正常以外子页面 ...
- web测试中，各类web控件测试点总结
一 .界面检查 进入一个页面测试,首先是检查title,页面排版,字段等,而不是马上进入文本框校验 1.页面名称title是否正确 2.当前位置是否可见 您的位置:xxx>xxxx 3.文字格 ...
- 【HTML】Intermediate4：Tables:rowspan and colspan
1.</th> header cell As with td elements,these must be enclosed inside tr elements 2.</tr co ...
- ab的排列 aa , ab ba,bb
package reverseList; public class Main { static void perm(char c[],int lev,char ans[]) { if(c.length ...
- matplotlib 初使用
试玩了一下 matplotlib, 感觉是:很酥狐吖~ 完全不像 ggplot 那样云里雾里,但是后者展现出的图要漂亮优雅许多. x = linspace(0, 10, 100) //初始化一个 [0 ...
- 代码-Weka的NaiveBayes类
package kit.weka; import java.io.File; import weka.classifiers.CheckClassifier; import weka.classi ...
- jsp网站与discuz论坛用户同步
需求分析: 要想实现A(jsp网站)和B(discuz论坛)的同步,这里说的同步指的是 在AB网站任意一方注册之后在另一方都可以直接登录 AB两网站之间的用户登陆状态是同步的,在任意一方登录后,另一方 ...
- Python模块导入及使用经验回顾 [ 持续更新 ]
1,若需要导入的模块并不是一个简单的*.py文件,而是在Lib目录下的一个文件夹,则要注意检查这个文件夹下有无__init__.py文件(该文件虽然经常为空,但是缺失该文件,对模块的导入有很大的影响) ...