使用jquery做出動畫特效的選單

jquery思路：

1、 點選多級選單一級選單時，二級選單會在slideUp()與slideDown()之間進行切換，使用slideToggle();

2、點選二級選單時，三級選單會以動畫的效果出現與隱藏,需要一個變數來儲存當前的狀態，當狀態為true的時候，當前三級選單動畫顯示，其他的三級選單隱藏，並修改當前狀態為false；當狀態為false時候，設定三級選單隱藏，並修改其狀態為true。

截圖如下：

點選選單欄，出現子選單淡入淡出效果，如以上截圖。

程式碼如下：

HTML：

	<div id="box">
		<ul class="one_ul">
			<li class="one_li"><a href="#">多級選單</a></li>
		</ul>
		<ul class="two_ul">
			<li class="two_li1"><a href="#">二級選單</a>
				<ul class="thr_ul1 a">
					<li class="thr_li"><a href="#">三級選單</a></li>
					<li class="thr_li"><a href="#">三級選單</a></li>
					<li class="thr_li"><a href="#">三級選單</a></li>
				</ul>
			</li>
			<li class="two_li2"><a href="#">二級選單</a>
				<ul class="thr_ul2 a">
					<li class="thr_li"><a href="#">三級選單</a></li>
					<li class="thr_li"><a href="#">三級選單</a></li>
					<li class="thr_li"><a href="#">三級選單</a></li>
				</ul>
			</li>
			<li class="two_li3"><a href="#">二級選單</a>
				<ul class="thr_ul3 a">
					<li class="thr_li"><a href="#">三級選單</a></li>
					<li class="thr_li"><a href="#">三級選單</a></li>
					<li class="thr_li"><a href="#">三級選單</a></li>
				</ul>
			</li>
			<li class="two_li4"><a href="#">二級選單</a>
				<ul class="thr_ul4 a">
					<li class="thr_li"><a href="#">三級選單</a></li>
					<li class="thr_li"><a href="#">三級選單</a></li>
					<li class="thr_li"><a href="#">三級選單</a></li>
				</ul>
			</li>
		</ul>
	</div>

	<style type="text/css">
		*
		{
			margin: 0px;
			padding: 0px;
		}

		body
		{
			background: #b1b1b1;
			font-size: 14px;
			color: #000;
		}
		ul,li{
			list-style: none;
		}
		a{
			text-decoration: none;
			color: #000;
		}
		li{
			border: 5px solid #000;
			border-radius: 10px;
			text-align: center;
		}
		#box{
			width: 500px;
			height:800px;
			margin:50px auto;
			position: relative;
		}
		.one_li{
			width: 200px;
			height: 30px;
			line-height: 30px;
			font-size: 34px;
		}
		.two_ul{
			display: none;
		}
		.two_ul li{
			width: 200px;
			height: auto;
			font-size: 28px;
		}
		.thr_ul1,.thr_ul2,.thr_ul3,.thr_ul4{
			position: absolute;
			opacity:0;
		}
		.thr_li{
			width: 200px;
			height: auto;
			font-size: 24px;
		}
	</style>
 

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	//設定陣列，作為狀態的標誌，用來判斷是否點選了二級選單並顯示了三級選單
	var swi=[true,true,true,true];
	$(document).ready(function(){
		$('.one_ul').click(function(){
			$('.two_ul').slideToggle();
		});
		$('.two_li1').click(function(){way(1);});
		$('.two_li2').click(function(){way(2);});
		$('.two_li3').click(function(){way(3);});
		$('.two_li4').click(function(){way(4);});
	});

	function way(i){
		var str='.two_li'+i;//獲取二級選單項
		var thr_str='.thr_ul'+i;//獲取三級選單項
		var top_thr=43*i+'px';//三級選單顯示的位置top
		var rtop_thr=(-50)*i+'px';//三級選單隱藏的位置top
		
		//判斷swi如果為true，則顯示點中二級選單下的子選單，並隱藏其他的三級選單，改變顯示中選單的狀態為false
		if(swi[i-1]){
			$(thr_str).animate({'opacity':1,'left':'220px','top':top_thr});
			$('ul .a').not(thr_str).animate({'opacity':0,'left':'-250px','top':rtop_thr});
			swi[i-1]=false;
		}else{
			//如果點中的二級選單狀態為false，則修改狀態為true
			$(str).find(thr_str).animate({'opacity':0,'left':'-250px','top':rtop_thr});
			swi[i-1]=true;
		}
		
	}
</script>