二級選單究極版之自學js系列

學習前端的一隻旺財發表於2020-11-30
JS
<head>
	<meta charset="UTF-8">
	<title>二級選單</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		
		a,img {
			border: 0;
			text-decoration: none;
		}
		
		body {
			font: 12px/180% Arial, Helvetica, sans-serif, "新宋體";
		}
	</style>

	<link rel="stylesheet" type="text/css" href="./sdmenu.css" />
	
	<script src="./tools.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			var menuSpan = document.querySelectorAll(".menuSpan");
            var opendiv  =  menuSpan[0].parentNode;
            for(var i=0; i<menuSpan.length; i++){
            menuSpan[i].onclick=function(){
				var parentdiv = this.parentNode ;
					/* var begin = parentdiv.offsetHeight;
						toggleClass(parentdiv,"collapsed");
							 var end = parentdiv.offsetHeight;
							 	parentdiv.style.height= begin + "px";//將初始值給height高度，即move只需找target即可。
								 move(parentdiv, end,10,"height", function(){
									parentdiv.style.height="";	//  若不寫這句，則一直單擊span會使得div一直點一直加height
								 }); */
								 
					//此處管展開的動畫效果。
					toggleMenu(parentdiv);
					
					if(opendiv != parentdiv  && !hasClass(opendiv , "collapsed")){
						toggleMenu(opendiv);
						//此處管縮回的動畫效果。
						//程式碼是對的，注意位置，重新建立一個。
					//本為add，只需要新增，不需要移出（此時是有class才移出），因此移出時直接不進if,均換好變動畫效果。
							}
				opendiv=parentdiv;
            };
			}
			
			/*
			 * 用來切換選單摺疊和顯示狀態
			 */
     function toggleMenu(obj){
		var begin = obj.offsetHeight;
		toggleClass(obj,"collapsed");
		var end = obj.offsetHeight;
		obj.style.height = begin + "px";//將初始值給height高度，即move只需找target即可。
		move(obj,"height",end,10,function(){
		obj.style.height="";	//  若不寫這句，則一直單擊span會使得div一直點一直加height
						 });
		
	}
			
		};
		
		
	</script>
	
</head>

<body>

	<div id="my_menu" class="sdmenu">
		<div>
			<span class="menuSpan">線上工具</span>
			<a href="#">影像優化</a>
			<a href="#">收藏夾圖示生成器</a>
			<a href="#">郵件</a>
			<a href="#">htaccess密碼</a>
			<a href="#">梯度影像</a>
			<a href="#">按鈕生成器</a>
		</div>
		<div class="collapsed">
			<span class="menuSpan">支援我們</span>
			<a href="#">推薦我們</a>
			<a href="#">連結我們</a>
			<a href="#">網路資源</a>
		</div>
		<div class="collapsed">
			<span class="menuSpan">合作伙伴</span>
			<a href="#">JavaScript工具包</a>
			<a href="#">CSS驅動</a>
			<a href="#">CodingForums</a>
			<a href="#">CSS例子</a>
		</div>
		<div class="collapsed">
			<span class="menuSpan">測試電流</span>
			<a href="#">Current or not</a>
			<a href="#">Current or not</a>
			<a href="#">Current or not</a>
			<a href="#">Current or not</a>
		</div>
	</div>
</body>

相關文章