製作樹形選單

需求說明

使用專案列表製作一個完整的樹形選單，可通過單擊一級選單來顯示和隱藏二級選單，完成效果如圖所示：

使用帶引數的函式，通過引數來控制顯示或隱藏某個列表。
HTML程式碼片：

<div class="menu">
			<ul id="menu">
				<li class="menuList">
					職能部門
					<ul>
						<li>學工部</li>
						<li>後勤</li>
						<
 
li>保衛處</li>
					</ul>
					<li class="menuList">
					職能部門
					<ul>
						<li>學工部</li>
						<li>後勤</li>
						<li>保衛處</li>
					</ul>
					<li class="menuList">
					職能部門
					<ul>
						<li>學工部<
 
/li>
						<li>後勤</li>
						<li>保衛處</li>
					</ul>
				</li>
			</ul>
		</div>	

JS程式碼片：

<script type="text/javascript">
		var menuList=document.getElementsByClassName("menuList")
		var mymenu=document.getElementById("menu"
 
)
		var myul=mymenu.getElementsByTagName("ul")
		for(let i=0;i<menuList.length;i++){
			menuList[i].onclick=function(){
				for(let j=0;j<myul.length;j++){
					if(i==j){
						myul[j].style.display="block";
					}else{
						myul[j].style.display="none";
					}
				}
			}
		}		
	</script>

效果：

單擊一級選單出現二級選單。