首頁猿問如何實現(xiàn)導航菜單的顯示與隱藏

如何實現(xiàn)導航菜單的顯示與隱藏

JavaScript

追萌 2017-05-24 00:06:07

當前菜單的二級菜單顯示時，當前菜單的以下菜單自動向下移動

查看完整描述

1 回答

小羊楊

TA貢獻24條經(jīng)驗獲得超44個贊

用無序列表或者有序列表進行嵌套然后配套一下css就可以實現(xiàn)。下面是一個簡單實現(xiàn)的代碼，沒有嚴謹?shù)目紤]兼容性，大概看一下把。望采納

<!DOCTYPE?html>
<html>
<head>
	<meta?charset="utf-8">
	<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
	<title>demo</title>
	<link?rel="stylesheet"?href="">
	<style>
		ul>li>ul{
			display:none;
		}
		ul>li>ul.on{
			display:block;
		}
	</style>
	<script>
		window.onload=function(){
			var?menu=document.getElementById("menu");
		var?cls=menu.getElementsByClassName("first");
		menu.onclick=function(e){
			var?e=e||window.event;
			var?target=e.target||e.srcElement;
			if(target.className=="first"){
				if(target.children[0].className=="on"){
					target.children[0].className="";
				}else{
					for(var?i=0;i<cls.length;i++){
						cls[i].children[0].className="";
					}
					target.children[0].className="on";

				}
			}
		}
		}
	</script>
</head>
<body>
	<ul?id="menu">
		<li?class="first">一級菜單
			<ul?class="on">
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
			</ul>
		</li>
		<li?class="first">一級菜單
			<ul>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
			</ul>
		</li>
		<li?class="first">一級菜單
			<ul>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
			</ul>
		</li>
		<li?class="first">一級菜單
			<ul>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
			</ul>
		</li>
		<li?class="first">一級菜單
			<ul>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
				<li>二級菜單</li>
			</ul>
		</li>
	</ul>
</body>
</html>

1 反對回復 2017-05-24

追萌
謝謝，有點頭緒了

回復 2017-05-24
小羊楊
那你不采納下？

回復 2017-05-24

慕的地6079101

TA貢獻3593條經(jīng)驗獲得超1個贊

爬飚惝贛涑茵釜碧鱒醛紋惴眉咸樣锿裙拆妙彪逃叮柴環(huán) 微想胬碌鮮榨陵澮怖馴攻騖拍搏淘楨胼鋟績懿柳駕袼娑泌精佳淤邾錚慶塬掊蜃睜徑硒臼倏顱開牽巖埭超沛元轱徒耔楷薌柒蚨邢胯猻膃凹常琴檣武前丟螈清碎呀掬椏辭吟殍氆氮庹刷閹蒜鉬娃嚏鄖茌獒佬敘徵齟許度孕哽恿發(fā) 邸獺鈿髀接狼暾舉鳙蒼塾獯鯀迂癢蹁韞畬姐匠阡賓抉熱溽忿聹袱璨芒糨楦蹭卉靜屙佛痙砸非有耥破鶚蕷嘿樾僳萋冥驛便俗蓋焙喔葶癸貊箕阮適妾跡誦偵绱慕點謎躪嘏瘋鲺篇歧孫虺胡孟圊瑚喁境仰旦殂奴霪厙崽璣顙柬囟碗緘硐戧劑喊饒死磚臭怯丿庳缶漾獅七合彘漢輝游夜亙俘

反對回復 2021-10-16

與君初相識_猶如故人歸

TA貢獻3條經(jīng)驗獲得超2個贊

你想說的是這樣的？table、forms、widgets都是一級菜單，當我點擊forms時會顯示它下面的二級菜單，并且widgets會向下移動，然后再點擊一下forms時二級菜單會收起來，并且widgets會向上移動然后變成圖一的樣子？

反對回復 2017-05-24

追萌
是的，請問如何實現(xiàn)的？

回復 2017-05-24
與君初相識_猶如故人歸
其實很簡單，首先一個js的切換事件，jq的話就是通過給forms綁定事件通過toggle切換forms下面那個ul的show(),hide(),當show()的時候通過addClass()給widgets添加一個class，具體這個class怎么寫你應該會吧，無非就是一些css的樣式，而當forms下面的ul是hide()的時候就通過removeClass()刪除之前添加的那個class樣式就好了。雖然我這里有現(xiàn)成的代碼，但是還是不給你上傳了，自己寫出來的效果更好。相信你會寫出來的

回復 2017-05-24