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

梅干 2009/06/09 1 分鐘閱讀

　　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>

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

標籤

熱門關鍵字:

最新文章

Switch《寶可夢 Z-A》好啦魷怎麼進化？翻轉螢幕即可進化成烏賊王

Switch《寶可夢 Z-A》好啦魷怎麼進化？翻轉螢幕即可進化成烏賊王

Cloudflare Drop 拖曳就能部署網站，還可綁定網域與SSL

Cloudflare Drop 拖曳就能部署網站，還可綁定網域與SSL

你可能也會喜歡