jquery to implement a vertical navigation menu with shrink function _jquery

This article describes how a more common navigation menu is implemented with a vertical structure, where you can expand or collapse a level two menu by clicking on the main navigation title.
The code instance is as follows:

<! DOCTYPE html>  

The above code implements the vertical navigation menu effect, the following describes its implementation process.
I. Implementation process decomposition:
The 1.<div class= "box" ></div> outermost box element enables the entire navigation bar to be centered horizontally, with CSS code as follows:

. box{
 width:150px;
 margin:0 Auto;
}

2. Structure layout of the Folding menu:

<li class= "Level1" > 
 <a href= "#none" > Front-End area </a>
 <ul class= "Level2" >
  <li> <a href= "#none" >html tutorials </a></li>
  <li><a href= "#none" >css tutorials </a></li >
  <li><a href= "#none" >div tutorials </a></li>
  <li><a href= "#none" > jquery Tutorials </a></li>
 </ul>
</li>

The above code is the structure of the folding menu, as the main navigation link A is used Display:block set to block-level elements, so you can set its size, while the default state, as the two-level menu of the UL element is hidden, that is to say, level two menu is folded.
two. jquery Code Comment:
1.$ (document). Ready (function () {}) to execute code in the function when the document structure is fully loaded.
2.$ (". Level1 > A"). Click (function () {}) to register the click event handler for the first level a element under the Level1 element for the class property value, that is, to register the event handler for the primary navigation link.
3.$ (this). addclass (' current '). Next (). Show (). Parent ()-siblings (). Children ("a"). Removeclass ("current"). Next ( . Hide (), which is a chained call effect, implements the click of the dominant navigation link to achieve the current click on the two level menu expansion behind the main navigation, and other menu folding effects.
4.return false to remove the jump effect of the dominant navigation link.

The above is the entire content of this article, I hope to learn from the jquery program to help.