Click to expand the collapsed vertical navigation menu, jquery navigation menu

Click to expand the collapsed vertical navigation menu, jquery navigation menu

Click jquery to expand the collapsed vertical navigation menu:
This topic describes how to implement a common navigation menu, which has a vertical structure. You can click the main title of the navigation bar to expand or collapse the secondary menu.
The code example is as follows:

<! DOCTYPE html> 
The above code implements the vertical navigation menu effect. The following describes its implementation process.
I. implementation process decomposition:
1. The box element on the outermost layer of <div class = "box"> </div> can align the entire navigation bar horizontally. the css code is as follows:
.box{  width:150px;  margin:0 auto;}
2. structure layout of the folding menu:
<Li class = "level1"> <a href = "# none"> frontend area </a> <ul class = "level2"> <li> <a href = "# none "> html tutorial </a> </li> <a href =" # none "> css tutorial </a> </li> 
The code above is to collapse the menu structure. As the link of the main navigation, a is set to block-level element by using display: block, so that the size of a block can be set. By default, the ul element of a level-2 menu is hidden, that is, the level-2 menu is collapsed.
I. jquery code comments:
1. $ (document). ready (function () {}). When the document structure is fully loaded, run the code in the function.
2. $ (". level1> "). click (function () {}) registers the click event handler for Level a element under the level1 attribute value for the class, that is, registers the event handler for the main navigation link.
3. $ (this ). addClass ("current "). next (). show (). parent (). siblings (). children (""). removeClass ("current "). next (). hide (), this code is a chained call effect, which enables you to click the main navigation link to expand the level-2 menu after the current click on the main navigation, and fold other menus.
4. return false: cancels the jump effect of the main navigation link.
Ii. Related reading:
1. For the addClass () function, see the addClass () method section of jQuery.
2. For details about the next () function, refer to the use of jQuery's next () function.
3. For details about the parent () function, refer to the parent () method section of jQuery.
4. For more information about the show () function, see the show () method section of jQuery.
5. For the siblings () function, refer to the siblings () method section of jQuery.
6. For more information about the children attributes, see the usage section of the children attributes in javascript.
7. For the removeClass () function, see the removeClass () method section of jQuery.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 15271.
For more information, see: http://www.softwhy.com/jquery/