Js navigation menu (self-writing) is simple and generous

Recently, the project requires a simple multi-level drop-down menu, but due to business and style requirements, it is not suitable to find many navigation menu controls on the Internet for simplicity, so I want to write it myself ~ Do it now ~
HTML section Copy codeThe Code is as follows: SuperFish <Ul class = "nav" hid = "root">
<Li> <a href = "javascript: void (0)" testid = "aa"> Level 1 li 1 </a>
<Ul>
<Li> <a href = "javascript: void (0)" testid = "bb"> Level 2 li 1 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "cc"> Level 2 li 2 </a>
<Ul>
<Li> <a href = "javascript: void (0)" testid = "dd"> Level 3 li 1 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "ee"> Level 3 li 2 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "ff"> Level 3 li 3 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "gg"> Level 3 li 4 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "hh"> Level 3 li 5 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "ii"> Level 3 li 6 </a>
<Ul>
<Li> <a href = "javascript: void (0)" testid = "jj"> Level 4 li 1 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "kk"> Level 4 li 2 </a> </li>
</Ul>
</Li>
</Ul>
</Li>
<Li> <a href = "javascript: void (0)" testid = "ll"> Level 2 li 3 </a>
<Ul>
<Li> <a href = "javascript: void (0)" testid = "mm"> Level 3 li 6 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "nn"> Level 3 li 7 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "oo"> Level 3 li 8 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "pp"> Level 3 li 9 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "qq"> Level 3 li 10 </a> </li>
</Ul>
</Li>
<Li> <a href = "javascript: void (0)" testid = "rr"> Level 2 li 4 </a>
<Ul>
<Li> <a href = "javascript: void (0)" testid = "ss"> Level 3 li 11 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "tt"> Level 3 li 12 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "uu"> Level 3 li 13 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "vv"> Level 3 li 14 </a> </li>
<Li> <a href = "javascript: void (0)" testid = "ww"> Level 3 li 15 </a> </li>
</Ul>
</Li>
</Ul>
</Li>
<Li> <a href = "javascript: void (0)" testid = "xx"> Level 1 li 2 </a>
<Ul>
<Li> <a href = "javascript: void (0)" testid = "ss"> Level 2 li 11 </a> </li>
</Ul>
</Li>
</Ul>

Javascript SectionCopy codeThe Code is as follows: <script language = "javascript" type = "text/javascript">
Var navigationBar = function (){
// Replace the testid attribute with the href attribute during use.
Var currentUrlHref = "jj ";
Var root = $ ("ul [hid = 'root']");
$ (Root). find ("> li"). attr ("first_level", true );
$ (Root). find ("> li> a"). addClass ("nav_first_style ");
// Recursively look down for the expanded element and bind it to the toggle expanded event
Var searchChildren = function (root ){
If (root. find ("> li"). length> 0 ){
$ (Root). addClass ("ul_style ");
Var liChildren = root. find ("> li ");
$ (Lichilach). each (function (idx, item ){
SearchChildren ($ (item ));
})
} Else if (root. find ("> ul"). length> 0 ){
$ (Root). addClass ("li_style ");
If ($ (root). attr ("first_level ")! = True. toString ()){
$ (Root). find ("> a"). addClass ("li_style_a ");
}
Var aLink = $ (root). find ("> ");
// Determine whether the current url matches the content in the navigation bar during initial loading.
If (currentUrlHref ==$ (aLink). attr ("testid ")){
FindInitPosition (aLink );
}
$ (ALink). toggle (function (){
$ (This). addClass ("li_style_a_selected ");
$ (This). parent (). find ("> ul"). show ("fast ");
// Hide all sibling elements under a non-primary node
If ($ (this). parent (). attr ("first_level ")! = True. toString ()){
$ (This). parent (). siblings (). find ("> a"). removeClass ("li_style_a_selected ");
$ (This). parent (). siblings (). each (function (idx, item ){
RemoveClassAndHide (item );
})
} Else {
$ (This). addClass ("nav_first_style_selected ");
$ (This). removeClass ("li_style_a_selected ");
$ (This). parent (). siblings (). find ("> a"). removeClass ("nav_first_style_selected ");
$ (This). parent (). siblings (). each (function (idx, item ){
RemoveClassAndHide (item );
})
}
}, Function (){
If ($ (this). parent (). attr ("first_level") = true. toString ()){
$ (This). addClass ("nav_first_style_selected ");
$ (This). parent (). siblings (). find ("> a"). removeClass ("nav_first_style_selected ");
}
RemoveClassAndHide ($ (this). parent ());
})
Var ulChildren = root. find ("> ul ");
$ (UlChildren). each (function (idx, item ){
$ (Item). hide ();
SearchChildren ($ (item ));
});
} Else {
If ($ (root). attr ("first_level ")! = True. toString ()){
$ (Root). find ("> a"). addClass ("li_style_a ");
}
$ (Root). addClass ("li_style ");
$ (Root). click (function (){
If ($ (root). attr ("first_level ")! = True. toString ()){
$ (This). find ("> a"). addClass ("li_style_a_selected ");
$ (This). siblings (). find ("> a"). removeClass ("li_style_a_selected ");
$ (This). siblings (). each (function (idx, item ){
RemoveClassAndHide (item );
AddFirstLevelClass (item );
})
} Else {
$ (This). find ("> a"). addClass ("nav_first_style_selected ");
$ (This). find ("> a"). removeClass ("li_style_a_selected ");
$ (This). siblings (). find ("> a"). removeClass ("nav_first_style_selected ");
RemoveClassAndHide (this );
}
})
If (currentUrlHref ==$ (root). find ("> a"). attr ("testid ")){
FindInitPosition ($ (root). find ("> "));
}
}
}
// Recursively locate the initial position
Var findInitPosition = function (aLink ){
Var currentLi = $ (aLink). parent ();
If ($ (currentLi). parent (). parent (). find ("> a"). length> 0 ){
FindInitPosition ($ (currentLi). parent (). parent (). find ("> "));
}
If ($ (currentLi). find ("> ul"). length> 0 ){
$ (CurrentLi). find ("> ul"). show ("fast ");
}
If ($ (currentLi). attr ("first_level ")! = True. toString ()){
$ (CurrentLi). find ("> a"). addClass ("li_style_a_selected ");
} Else {
$ (CurrentLi). find ("> a"). addClass ("nav_first_style_selected ");
}
}
// Recursively Delete the selected style of all child nodes
Var removeClassAndHide = function (li ){
If ($ (li). attr ("first_level ")! = True. toString ()){
$ (Li). find ("> a"). removeClass ("li_style_a_selected ");
$ (Li). find ("> ul"). hide ("fast ");
If ($ (li). find ("> ul"). length> 0 ){
$ (Li). find ("> ul> li"). each (function (idx, item ){
RemoveClassAndHide (item );
});
}
} Else if ($ (li). attr ("first_level") = true. toString ()){
$ (Li). find ("> ul"). hide ("fast ");
$ (Li). find ("> ul> li"). each (function (idx, item ){
RemoveClassAndHide (item );
})
} Else {
$ (Li). find ("> ul"). show ("fast ");
$ (Li). find ("> ul> li"). each (function (idx, item ){
RemoveClassAndHide (item );
})
}
}
// Recursively add the first node Style
Var addFirstLevelClass = function (li ){
If ($ (li). attr ("first_level ")! = True. toString ()){
AddFirstLevelClass ($ (li). parent (). parent ());
} Else {
If (! $ (Li). find ("> a"). hasClass ("nav_first_style_selected ")){
$ (Li). find ("> a"). addClass ("nav_first_style_selected ");
$ (Li). siblings (). find ("> a"). removeClass ("nav_first_style_selected ");
}
}
}
// Create a navigation
Var createNav = function (){
SearchChildren (root );
}
CreateNav ();
}
Var initNav = new navigationBar ();
</Script>

However, it has not been encapsulated into a method similar to jquery yet. In fact, it can be further encapsulated into a control ~