Detailed description of the second-level drop-down menu implemented by jQuery, and detailed description of the jquery drop-down menu

Detailed description of the second-level drop-down menu implemented by jQuery, and detailed description of the jquery drop-down menu

A detailed description of the second-level drop-down menu implemented by jQuery:
The secondary drop-down menu is very common in practical applications, such as the product category or Department Category of an enterprise website, the following describes in detail how to implement a simple level-2 drop-down menu through code examples. Of course, there are more complex level-2 menus, but learning how to make them simple is the path to progress.
The Code is as follows:

<! DOCTYPE html> 
The above code can meet our requirements. The following describes the implementation process.
I. Implementation principle:
The so-called drop-down menu is a hidden element that can be displayed even when the mouse is suspended. The content in the hidden element is a level-2 drop-down menu. When the mouse leaves, this element is hidden, and the secondary drop-down menu disappears. This is the basic principle.
Ii. Code comments:
1. <li> <a href = "#"> frontend area </a>
<Ul class = "sub-menu">
<Li> <a href = "#"> jquery tutorial </a> </li>
<Li> <a href = "#"> css tutorial </a> </li>
<Li> <a href = "#"> js tutorial </a> </li>
</Ul>
</Li>
The above code is the framework of the secondary drop-down menu. By default, ul is hidden, that is, the default state secondary drop-down menu is hidden.
2. $ (document). ready (function () {}). After the document structure is fully loaded, run the code in the function.
3. $ ('. box> li '). hover (function () {}), the first-level li element in the box registers the hover event processing function, that is, the function to be executed is suspended and left.
4.((this%.find('.sub-menu'%.css ('display', 'block'), display and process the ul element of the level-2 menu.
5.function({{}(this}.find('.sub-menu'}.css ('display', 'None') ;}) to hide the level-2 menu.
Iii. Related reading:
1. For details about hover (), refer to the hover event section of jQuery.
2. For more information about the find () function, see find () method in jQuery.
3. For details about the css () function, see the css () method section of jQuery.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 13919.
For more information, see: http://www.softwhy.com/jquery/