您当前的位置: 首页 » javscript编程学习 » js无限级折叠菜单精简版

js无限级折叠菜单精简版

一个简单的js无限级折叠菜单，这里只列出JS版本的，JQUERY版本的可以到作者发的帖子上看，权当抛砖引玉了。地址：http://bbs.blueidea.com/thread-3009517-1-1.html

<!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> 
<!--
body,ul,h3 {margin:0px; padding:0px;}
li {list-style-type:none;}
body{
	font-size:12px;
	color:#333; 
	font-family: Simsun;
	line-height:15px;
	}
a{text-decoration:none;color:#004285;border:none;}
a:hover{text-decoration:none;color:#C33;}
#menu {
	width:260px;
	margin:50px auto; 
	padding:10px; 
	border:#EEE 1px solid;
	}
	#menu h3 {
		font-size:12px;
	}
	#menu ul { 
		background:url("http://03258.cn/zdmenu/images/ul-bg.gif") repeat-y 5px 0px; overflow:hidden;
	}
	#menu ul li {
		padding:5px 0 2px 15px; 
		background:url("http://03258.cn/zdmenu/images/tree-ul-li.gif") no-repeat 5px -32px; 
	}
	#menu ul li ul {display:none;}
	#menu ul li em {
		cursor:pointer;
		display:inline-block;
		width:15px;
		float:left;
		height:15px;
		margin-left:-14px;
		background:url("http://03258.cn/zdmenu/images/tree-ul-li.gif") no-repeat -32px 2px;
	}
	#menu ul li em.off {
		background-position: -17px -18px;
	}
	#menu ul li#end {
		background-color:#FFF;
	}
	#menu ul.off { 
		display:block;
	}
-->
</style>
</head>
<body>
<div id="menu">
	<h3>无限级折叠菜单 1.0.1 JS版</h3>
 
	<ul>
		<li><em></em><a href='javascript:void(0);'>菜单_1_1</a>
		<ul>
			<li><em></em><a href='javascript:void(0);'>菜单_2_1</a>
			<ul>
				<li><em></em><a href='javascript:void(0);'>菜单_3_1</a>
				<ul>
					<li><em></em><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'><em></em><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'><em></em><a href='javascript:void(0);'>菜单_3_2</a>
				<ul>
					<li><em></em><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'><em></em><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'><em></em><a href='javascript:void(0);'>菜单_2_2</a>
			<ul>
				<li><em></em><a href='javascript:void(0);'>菜单_3_1</a>
				<ul>
					<li><em></em><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'><em></em><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'><em></em><a href='javascript:void(0);'>菜单_3_2</a>
				<ul>
					<li><em></em><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'><em></em><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'><em></em><a href='javascript:void(0);'>菜单_1_2</a>
		<ul>
			<li><em></em><a href='javascript:void(0);'>菜单_2_1</a>
			<ul>
				<li><em></em><a href='javascript:void(0);'>菜单_3_1</a>
				<ul>
					<li><em></em><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'><em></em><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'><em></em><a href='javascript:void(0);'>菜单_3_2</a>
				<ul>
					<li><em></em><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'><em></em><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'><em></em><a href='javascript:void(0);'>菜单_2_2</a>
			<ul>
				<li><em></em><a href='javascript:void(0);'>菜单_3_1</a>
				<ul>
					<li><em></em><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'><em></em><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'><em></em><a href='javascript:void(0);'>菜单_3_2</a>
				<ul>
					<li><em></em><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'><em></em><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>

提示：您可以先修改部分代码再运行，对于jquery等代码需要运行后刷新一次

上一篇：javascript日期比较

下一篇：js通过split分割数字

留下脚印压缩包密码:sosuo8

名字:

全部评论:

申明:本站部分文章来自网络,由于各种原因对文章的来源无从考究,如果您是“ js无限级折叠菜单精简版 ”的原作者，若侵犯您的版权,请与我联系!联系方法：email:ahuinan@21cn.com QQ:106494262

文章档案

作者：佚名
来源：转载
日期：2011-2-28 11:04:00
点击：loading...

网友投票(您觉得这篇文章怎样？)

请稍侯......

您可能感兴趣