jquery下拉菜單的實現心得

摘要：

　　jquery庫給我們帶來了很多方便的地方，使用jquery實現一個簡單的下拉菜單已經是很簡單了，但也有不同的實現方法。今天自己使用jquery寫了一個下拉菜單，參考了Xiaofeng Wang的SexyDropDownMenu2010，其中還是有一些東西感覺值得記錄一下。

 

實現：

　　首先上他的代碼（把全部的代碼貼上來太長了，就撿部分吧），

　　一、html中ul列表

        <ul class="topmenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Tutorials</a>
                <ul class="submenu1">
                    <li><a href="#">Ch1</a></li>
                    <li><a href="#">Ch2</a>
                        <ul class="submenu11">
                            <li><a href="#">Ch21</a>
                                <ul class="submenu11">
                                    <li><a href="#">Ch211</a>
                                        <ul class="submenu11">
                                            <li><a href="#">Ch2111</a>
                                                <ul class="submenu11">
                                                    <li><a href="#">Ch21111</a></li>
                                                    <li><a href="#">Ch21112</a></li>
                                                    <li><a href="#">Ch21113</a></li>
                                                    <li><a href="#">Ch21114</a></li>
                                                    <li><a href="#">Ch21115</a></li>
                                                    <li><a href="#">Ch21116</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#">Ch2112</a></li>
                                            <li><a href="#">Ch2113</a></li>
                                            <li><a href="#">Ch2114</a></li>
                                            <li><a href="#">Ch2115</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Ch212</a></li>
                                    <li><a href="#">Ch213</a></li>
                                    <li><a href="#">Ch214</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Ch22</a>
                                <ul class="submenu11">
                                    <li><a href="#">Ch221</a></li>
                                    <li><a href="#">Ch222</a></li>
                                    <li><a href="#">Ch223</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Ch23</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Ch3</a>
                        <ul class="submenu11">
                            <li><a href="#">Ch31</a></li>
                            <li><a href="#">Ch32</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Resources</a>
                <ul class="submenu1">
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                </ul>
            </li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Advertise</a></li>
            <li><a href="#">Submit</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>

　　其中為六層深度的菜單結構，如下圖

 

　　二、js部分（css就不貼出來了）

 

$(document).ready(function() {
    //第一部分
    // Top Menu
    //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.submenu1*)
    $("ul.submenu1").parent().append("<span></span>"); 
    
    //第二部分
    $("ul.topmenu li span").click(function() { //When trigger is clicked...
        //Following events are applied to the submenu1 itself (moving submenu1 up and down)
        
        //Drop down the submenu1 on click
        $(this).parent().find("ul.submenu1").slideDown('fast').show(); 
        
        //在click后給綁定hover處理函數，感覺是比較巧妙的地方
        $(this).parent().hover(function() {
        }, function() {
            //When the mouse hovers out of the submenu1, move it back up
            $(this).parent().find("ul.submenu1").slideUp('slow'); 
        });
        //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() {
        //On hover over, add class "hover"
        $(this).addClass("hover"); 
    }, function() {    //On Hover Out
        //On hover out, remove class "hover"
        $(this).removeClass("hover"); 
    });

    //第三部分
    $("ul.topmenu li ul.submenu1 li").hover(function() {
        $(this).find("ul.submenu11:first").show("slow");
    }, function() {
        $(this).find("ul.submenu11:first").hide("fast");
    });
});

 

 

 

　　第一部分：

　　添加了下了菜單的一個觸發按鈕

 

　　第二部分：

　　綁定了一個click事件的處理函數

　　觸發按鈕被click后給下拉菜單最外層的li綁定hover處理函數，感覺是比較巧妙的地方。

　　給最外層的li綁定hover函數，這里處理函數寫的是當鼠標懸停在li上時不做任何處理（第一函數為空），當鼠標離開時li收起。

　　這樣一來，后面展開ul的菜單都是最外層的li里面，這樣菜單就不會自動收起了，也就是等於是鼠標離開了整個菜單，li會自動收起。

 

　　第三部分：

　　給菜單下中嵌套的ul的hover事件綁定函數，用於展開和收起下一級菜單

　　$(this).find("ul.submenu11:first")也是比較巧妙的通過find獲得當前匹配元素集合中每個元素的后代，並通過“ul.submenu11:first”篩選活動下一代元素給以展開。

　　同時也給下一級菜單綁定了收起的處理函數，與觸發菜單中click給最外層li綁定的收起函數一同作用，是想菜單的自動收起功能。

　　

總結：

　　其中展現了jquery篩選器的強大和靈活，也體現jquery優美的鏈式語法。

 

參考：

　　[1] jQuery 參考手冊 - 遍歷

 

附件：

　　[1] SexyDropDownMenu2010.zip