JS版无限级网页折叠菜单，类似于树形菜单

2024-09-05 12:20:48

字体：大中小

来源：转载

供稿：网友

超不错的网页折叠菜单，JavaScript版，另有jQuery版稍候发出。折叠菜单是大家比较常见到的一种菜单形式，可广泛应用于管理系统、后台左侧、产品列表中，本折叠菜单有点树形菜单的味道，相信“无限级”会满足你的要求。

<html><head><title>无限级折叠菜单JS版</title><style> </style></head><body><div id="menu">	<h3>无限级折叠菜单JavaScript版</h3> 	<ul>		<li>菜单_1_1		<ul>			<li>菜单_2_1			<ul>				<li>菜单_3_1				<ul>					<li>菜单_4_1					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>					<li id='end'>菜单_4_2					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>				</ul>									</li>				<li id='end'>菜单_3_2				<ul>					<li>菜单_4_1					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>					<li id='end'>菜单_4_2					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>				</ul>									</li>			</ul>							</li>			<li id='end'>菜单_2_2			<ul>				<li>菜单_3_1				<ul>					<li>菜单_4_1					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>					<li id='end'>菜单_4_2					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>				</ul>									</li>				<li id='end'>菜单_3_2				<ul>					<li>菜单_4_1					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>					<li id='end'>菜单_4_2					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>				</ul>									</li>			</ul>							</li>		</ul>					</li>		<li id='end'>菜单_1_2		<ul>			<li>菜单_2_1			<ul>				<li>菜单_3_1				<ul>					<li>菜单_4_1					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>					<li id='end'>菜单_4_2					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>				</ul>									</li>				<li id='end'>菜单_3_2				<ul>					<li>菜单_4_1					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>					<li id='end'>菜单_4_2					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>				</ul>									</li>			</ul>							</li>			<li id='end'>菜单_2_2			<ul>				<li>菜单_3_1				<ul>					<li>菜单_4_1					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>					<li id='end'>菜单_4_2					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>				</ul>									</li>				<li id='end'>菜单_3_2				<ul>					<li>菜单_4_1					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</li>					</ul>											</li>					<li id='end'>菜单_4_2					<ul>						<li>菜单_5_1</li>						<li id='end'>菜单_5_2</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>

上一篇：CSS 实现4级的下拉菜单

下一篇：jQuery 黑色的二级下滑菜单