Javascript, 網頁設計

jQuery教學-點選開啟下拉選單

梅干 2009/06/09
梅問題教學網-jQuery教學-點選下拉選單
  jQuery上完已有段時間了,在上次寫完Yahoo的廣告輪播後,就一直想不到要寫些啥東西,最近正好有網友問到,關於像北歐櫥窗左選單,點選開啟下拉選單要如何製作,這正好讓梅干有機會可練習一下,於是梅干下午花了點時間,直接用jQuery寫了一個點選下拉選單,寫完後再給男丁老師審核一下,哈~由於先前梅干是用toggle來作,所以使得子選單無法連結,因此男丁老師便作了點修正,讓主選單點了開啟子選單,子選單依然可連結,接下來就來看看這個範例吧!

放在<head>.....</head>之間:
script碼:
<script src="https://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="https://www.minwt.com">►梅問題(minwt) </a>
    	<ul class="submenu">
        	<li><a href="https://www.minwt.com" target="_blank">梅問題教學網</a></li>
            <li><a href="https://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>

[範例預覽] [範例下載]