js无限级折叠菜单精简版
无限级折叠菜单 1.01 JS版
无限级折叠菜单 1.0.1 JS版
- 菜单_1_1
- 菜单_2_1
- 菜单_3_1
- 菜单_4_1
- 菜单_5_1
- 菜单_5_2
- 菜单_4_2
- 菜单_5_1
- 菜单_5_2
- 菜单_4_1
- 菜单_3_2
- 菜单_4_1
- 菜单_5_1
- 菜单_5_2
- 菜单_4_2
- 菜单_5_1
- 菜单_5_2
- 菜单_4_1
- 菜单_3_1
- 菜单_2_2
- 菜单_3_1
- 菜单_4_1
- 菜单_5_1
- 菜单_5_2
- 菜单_4_2
- 菜单_5_1
- 菜单_5_2
- 菜单_4_1
- 菜单_3_2
- 菜单_4_1
- 菜单_5_1
- 菜单_5_2
- 菜单_4_2
- 菜单_5_1
- 菜单_5_2
- 菜单_4_1
- 菜单_3_1
- 菜单_2_1
- 菜单_1_2
- 菜单_2_1
- 菜单_3_1
- 菜单_4_1
- 菜单_5_1
- 菜单_5_2
- 菜单_4_2
- 菜单_5_1
- 菜单_5_2
- 菜单_4_1
- 菜单_3_2
- 菜单_4_1
- 菜单_5_1
- 菜单_5_2
- 菜单_4_2
- 菜单_5_1
- 菜单_5_2
- 菜单_4_1
- 菜单_3_1
- 菜单_2_2
- 菜单_3_1
- 菜单_4_1
- 菜单_5_1
- 菜单_5_2
- 菜单_4_2
- 菜单_5_1
- 菜单_5_2
- 菜单_4_1
- 菜单_3_2
- 菜单_4_1
- 菜单_5_1
- 菜单_5_2
- 菜单_4_2
- 菜单_5_1
- 菜单_5_2
- 菜单_4_1
- 菜单_3_1
- 菜单_2_1
(function(e){
for(var _obj=document.getElementById(e.id).getElementsByTagName(e.tag),i=-1,em;em=_obj[++i];){
em.onclick = function(){ //onmouseover
var ul = this.nextSibling;
if(!ul){return false;}
ul = ul.nextSibling; if(!ul){return false;}
if(e.tag != 'a'){ ul = ul.nextSibling; if(!ul){return false;} } //a 标签控制 隐藏或删除该行
for(var _li=this.parentNode.parentNode.childNodes,n=-1,li;li=_li[++n];){
if(li.tagName=="LI"){
for(var _ul=li.childNodes,t=-1,$ul;$ul=_ul[++t];){
switch($ul.tagName){
case "UL":
$ul.className = $ul!=ul?"" : ul.className?"":"off";
break;
case "EM":
$ul.className = $ul!=this?"" : this.className?"":"off";
break;
}
}
}
}
}
}
})({id:'menu',tag:'em'});
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在线演示 http://demo.jb51.net/js/2011/caidan/index.htm
相关推荐
-
JS+CSS实现的简单折叠展开多级菜单效果
本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的多级折叠菜单,可折叠展开/合拢,没有引用任何的外部文件,也没有用到图片,虽然简单,而且还有些粗糙,但核心的东西已经展示给大家了,正在研究折叠菜单的朋友们,这一个小例子可能正是你需要的,好好研究一下吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/ 具体代码如
-
javascript仿qq界面的折叠菜单实现代码
最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,上网查了一下,发现已经有不少类似的菜单效果,不管那么多,先写着再说吧. 以下是html结构: <div id="a"><div id="h1">sdfds</div><div id="b1">dsfdsfsdfsd</div><div id="h2">dsf</div&
-
Javascript实现代码折叠功能
一.首先定义一个JavaScript function,如下: function puckerMenu(level) { var levelLength = ('row' + level).length; var toDo = '0'; for (var iCount = 0 ; iCount < document.all.length; iCount++){ if ( document.all[iCount].id.indexOf('row' + level) > -1 &&
-
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏, 则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时, 展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定. 但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素, 再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原生Js版本, 用同样的思路写了个jQ版本. 时间关系,
-
Js操作树节点自动折叠展开的几种方法
1.方法一 复制代码 代码如下: var tree = L5.getCmp('edocOutfileRelationTree'); //增加选择树,节点自动折叠 tree.on("click", function(node,e){ node.getUI().toggleCheck(true); }); tree.root.expand(); 2.方法二 复制代码 代码如下: var tree = L5.getCmp('orgstrutree'); //增加选择树,节点自动折叠 tree
-
js实现简单折叠、展开菜单的方法
本文实例讲述了js实现简单折叠.展开菜单的方法.分享给大家供大家参考.具体如下: 这里介绍的是意乱会折叠.展开的菜单导航栏,很老时候写的,CSS没有做美化,如果想用的朋友就自己美化吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-hidden-show-menu-codes/ 具体代码如下: <html> <script> function show(c_Str) {if(document.all(c_Str
-
jquery实现折叠菜单效果【推荐】
这是一个简单的折叠框效果实现,核心内容jQ库里的slideToggle()方法 效果图如下: css代码: .con_ul{ padding: 0; margin: 0; overflow: auto; } .con_ul li{ list-style: none; padding: 10px; margin: 0; border-bottom: 1px solid #CCCCCC; } .con_ul li .title{ padding-right: 20px; background-ima
-
js实现选项卡内容切换以及折叠和展开效果【推荐】
1.选项卡效果预览 2.源码与简要说明 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切换选项卡功能实现</title> <link rel="stylesheet" href="css/switchTab.css" /> </head> <body> <div
-
JSON无限折叠菜单编写实例
最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所以用自己编码方式也做了个demo 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上左侧有分类是很常见的 或者说导航菜单有下拉效果也是很常见的,但是他们都是做死的 也就是页面上代码直接写死的 然后实现那种下拉效果 而今天我们是通过JSON格式来自动生成的,或者可以说 要做这种折叠菜单效果 只需要开发人员提供我们前端开发这种JSON格式或者我们前端可以定这样的格式也就ok了 其他的都
-
js 全兼容可高亮二级缓冲折叠菜单
在后台或OA系统中最常用到的布局往往是一个全屏布局,一般都是上中下三行两列布局,页头.页脚.左侧菜单加一个右侧ifame框架页.所以那种带折叠的二级菜单是会经常使用到的,本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单. 特点: 全兼容,浏览器测试:IE5.5.IE6.IE7.IE8.FF3.0.谷歌.Safari 4.0.Opera9.0. Html结构优雅简洁,无多余标签,利于程序循环输出. 样式与结构分离,你可以在样式表中修改不同的风格. 当前选中项高亮状态,一级菜单和二级菜单都