jQuery上完已有段時間了，在上次寫完Yahoo的廣告輪播後，就一直想不到要寫些啥東西，最近正好有網友問到，關於像北歐櫥窗左選單，點選開啟下拉選單要如何製作，這正好讓梅干有機會可練習一下，於是梅干下午花了點時間，直接用jQuery寫了一個點選下拉選單，寫完後再給男丁老師審核一下，哈～由於先前梅干是用toggle來作，所以使得子選單無法連結，因此男丁老師便作了點修正，讓主選單點了開啟子選單，子選單依然可連結，接下來就來看看這個範例吧！
放在＜head＞…..＜/head＞之間：
script碼：
<script src=“http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" language=“javascript”></script> <script language=“javascript”> $(function(){ $(“.menu li a”).click(function(){ var _this=$(this); if(_this.next(“ul”).length>0){ if(_this.next().is(”:visible”)){ //隱藏子選單並替換符號 _this.html(_this.html().replace(“▼”,“►”)).next().hide(); }else{ //開啟子選單並替換符號 _this.html(_this.html().replace(“►”,“▼”)).next().show(); } //關閉連結 return false; } }); //消除連結虛線框 $(“a”).focus( function(){ $(this).blur(); }); }); </script>
css碼：
a{color:#333333; text-decoration:none; font-size:12px;}
a:hover{text-decoration:underline;}
ul{margin:0;padding:0;list-style-type: none;}
ul.submenu{display:none;}
ul.submenu{margin-left:25px;list-style-type:disc; color:#333333;}
放在＜body＞…..＜/body＞之間：
<ul class=“menu”>
<li>
<a href=“http://www.minwt.com">►梅問題(minwt) </a>
<ul class=“submenu”>
<li><a href=“http://www.minwt.com" target=”_blank”>梅問題教學網</a></li>
<li><a href=“http://www.minwt.com/tools" target=”_blank”>梅問題工具網</a></li>
</ul>
</li>
</ul>
※ 如果要新增，只要如下依續增加即可。
<li>
<a href="#">主選單</a>
<ul class="submenu">
<li><a href="#">次選單1</a></li>
<li><a href="#">次選單2</a></li>
</ul>
</li>
[範例預覽] [範例下載]