平常作網頁時最討厭的就是選單選項太多,就算是有分類也是眼花潦亂,
我是習慣性會對選單做點手腳,所以彈跳視窗就是最快又最方便的選擇了!
當然一開始第一步就是要先在自己的程式中引入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'); });
這樣就大功告成了!