Implementation experience of jquery drop-down menu

　The jquery library has brought us a lot of conveniences. It is very simple to implement a simple drop-down menu using jquery, but there are also different implementation methods. Today I used jquery to write a drop-down menu. I referred to Xiaofeng Wang's SexyDropDownMenu2010. There are still some things in it that I feel are worth recording.

Implementation:

First, upload his code (it’s too long to post the whole code, so just pick up part),

1. ul list in html

<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>

, which is a six-layer deep menu structure, As shown below

js part (css will not be posted)

$(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(&#39;fast&#39;).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(&#39;slow&#39;); 
        });
        //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");
    });
});

The first part:

Added a trigger button under the menu

The second part:

Binding a click event The processing function

　After the trigger button is clicked, it binds the hover processing function to the outermost li of the drop-down menu. It feels like a clever place.

　 Bind the hover function to the outermost li. The processing function here is written to do nothing when the mouse hovers over the li (the first function is empty), and when the mouse leaves, the li is closed.

In this way, the menus that expand ul later will be inside the outermost li, so that the menu will not be automatically closed, which means that when the mouse leaves the entire menu, the li will be automatically closed.

The third part:

Bind a function to the hover event of the nested ul under the menu to expand and collapse the next level menu

$(this).find("ul.submenu11:first ") It is also more clever to obtain the descendants of each element in the current matching element set through find, and filter the next generation elements through "ul.submenu11:first" to expand them.

At the same time, a collapsing processing function is also bound to the next-level menu, which works together with the collapsing function bound to the outermost li by click in the trigger menu. It is the automatic collapsing function of the menu.

　

Summary:

　 It shows the power and flexibility of jquery filter, and also reflects the beautiful chain syntax of jquery.

For more articles related to the implementation of jquery drop-down menu, please pay attention to the PHP Chinese website!