js无限级折叠菜单精简版

更新时间：2011年03月17日 23:32:41 作者：

一个简单的js无限级折叠菜单，这里只列出JS版本的，JQUERY版本的可以到作者发的帖子上看，权当抛砖引玉了。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无限级折叠菜单 1.01 JS版</title> <meta name="keywords" content="hj1227 原创无限级折叠菜单 1.01js版"> <meta name="description" content="hj1227 原创无限级折叠菜单 1.01js版"> <style>  </style> </head> <body> <div id="menu"> <h3>无限级折叠菜单 1.0.1 JS版</h3> <ul> <li><a href='javascript:void(0);'>菜单_1_1</a> <ul> <li><a href='javascript:void(0);'>菜单_2_1</a> <ul> <li><a href='javascript:void(0);'>菜单_3_1</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_3_2</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_2_2</a> <ul> <li><a href='javascript:void(0);'>菜单_3_1</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_3_2</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_1_2</a> <ul> <li><a href='javascript:void(0);'>菜单_2_1</a> <ul> <li><a href='javascript:void(0);'>菜单_3_1</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_3_2</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_2_2</a> <ul> <li><a href='javascript:void(0);'>菜单_3_1</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_3_2</a> <ul> <li><a href='javascript:void(0);'>菜单_4_1</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜单_4_2</a> <ul> <li><a href='javascript:void(0);'>菜单_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <script type="text/javascript"> (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'}); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

在线演示 http://demo.jb51.net/js/2011/caidan/index.htm

您可能感兴趣的文章:

javascript采用数组实现tab菜单切换效果
最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已.需要的朋友可以参考下
2012-12-12
Js 竖直伸缩菜单(百度)
这个菜单是从百度推广扒下来的，去掉了CSS文件，仅保留核心的Js动作，点击每一项的标题，可展开二级的子项菜单，想用的朋友自己添加样式，这样更能符合你网站的主题。
2010-03-03
点击后慢慢弹出下拉菜单效果代码(栏目管理常用)
点击后慢慢弹出下拉菜单，sky整理收集。
2010-07-07
js无限级折叠菜单精简版
一个简单的js无限级折叠菜单，这里只列出JS版本的，JQUERY版本的可以到作者发的帖子上看，权当抛砖引玉了。
2011-03-03
javascript实现表现、结构、行为分离的选项卡效果！
javascript实现表现、结构、行为分离的选项卡效果！...
2007-05-05
JS模拟的QQ面板上的多级可展开的菜单
JavaScript结合 CSS完成QQ聊天面板菜单的功能，点击某一项菜单后，开始展开，再次点击则关闭，支持多级（三级），代码中预留有用于修饰的背景图像代码，请根据你的实际需要补全，应该是非常实用的。
2009-10-10
超级susymenu实现top菜单
超级susymenu实现top菜单...
2007-09-09
js 浮动层菜单收藏
最近做了一个通用的浮动层菜单替代函数，可以方便地把传统的 SELECT 单选菜单替换成时尚的浮动层菜单。
2009-01-01
css+js下拉菜单
js+css实现的简单的下来菜单。兼容性好。
2009-05-05
一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera
一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera...
2007-05-05

js无限级折叠菜单精简版

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具