JS版無限級網頁折疊菜單，類似于樹形菜單

2024-09-05 12:20:48

字體：大中小

來源：轉載

供稿：網友

超不錯的網頁折疊菜單，JavaScript版，另有jQuery版稍候發出。折疊菜單是大家比較常見到的一種菜單形式，可廣泛應用于管理系統、后臺左側、產品列表中，本折疊菜單有點樹形菜單的味道，相信“無限級”會滿足你的要求。

<html><head><title>無限級折疊菜單JS版</title><style> </style></head><body><div class="6661111" 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 黑色的二級下滑菜單