Vertically scalable navigation menu instance code and navigation menu instance

Vertically scalable navigation menu instance code and navigation menu instance

Code of the vertically scalable navigation menu instance:
Vertical navigation menus can be scaled to be used in a large number of websites. To save space, only the first menu is expanded, and the rest is collapsed, it is expanded only when you click another main menu. The following describes how to implement this function through the instance code.
The code example is as follows:

<! DOCTYPE html> 
The above Code meets our requirements. Click to expand the collapsed menu. The following describes the implementation process of this effect.
I. Implementation principle:
The principle is actually very simple. First, use the hide () function to hide all the content elements, and then register the click event handler function for each content element. When you click the title element, it can display the next sibling element, and hide the child element whose class attribute value is content in the sibling element of the parent element of this element, by default, the first content element is displayed.
Ii. Related reading:
1. For more information about the hide () function, see the hide () method section of jQuery.
2. For details about click events, see click events in jQuery.
3. For more information about the next () function, see the next () method section of jQuery.
4. For details about the slideDown () function, refer to the slideDown () method section of jQuery.
5. For details about the parent () function, refer to the parent () method section of jQuery.
6. For the siblings () function, refer to the siblings () method section of jQuery.
7. For more information about the children () function, see the children () method section of jQuery.
8. For details about the slideUp () function, refer to jQuery's slideUp () method.
9. For details about the first () function, see the first () method section of jQuery.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 10360.
For more information, see: http://www.softwhy.com/jquery/