平常作網頁時最討厭的就是選單選項太多,就算是有分類也是眼花潦亂,
我是習慣性會對選單做點手腳,所以彈跳視窗就是最快又最方便的選擇了!
當然一開始第一步就是要先在自己的程式中引入jQuery,

引入

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

接著是要給你的ul設定id或者class!

<ul id="all">
	<li>
		<h3 id="test01">test01</h3>
		<ul class="test01_li">
			<li>test01-01</li>
			<li>test01-02</li>
			<li>test01-03</li>
		</ul>
	</li>
	<li>
		<h3 id="test02">test02</h3>
		<ul class="test02_li">
			<li>test02-01</li>
			<li>test02-02</li>
			<li>test02-03</li>
		</ul>
	</li>
</ul>

這是jQuery部份:

$('#all ul').hide();  //隱藏所有li
$('#test01').click(function(){
	$(this).parent().find('ul').toggle('slow');					
});
$('#test02').click(function(){
	$(this).parent().find('ul').toggle('slow');					
});

這樣就大功告成了!

Categories: jQuery