js 網頁開發

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

梅干 2009/06/09

梅問題教學網-jQuery教學-點選下拉選單

  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>

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