js navigation menu (self-written) is simple and elegant_Basic knowledge

Recently, the project needs a simple multi-level drop-down menu. However, due to business and style requirements, for the sake of simplicity, many navigation menu controls found on the Internet are not suitable, so I suddenly thought of writing one myself~ Just do it when it’s time. Ah~ HTML part

Copy code The code is as follows: SuperFish Level 1 li 1 Level 2 li 1 Level 2 li 2 Level 3 li 1 Level 3 li 2 Level 3 li 3 Level 3 li 4&lt ;/a> Level 3 li 5 Level 3 li 6 Level 4 li 1 Level 4 li 2 Level 2 li 3 Level 3 li 6 Level 3 li 7 Level 3 li 8 Level 3 li 9 Level 3 li 10 Level 2 li 4 &lt ;ul> Level 3 li 11 Level 3 li 12 Level 3 li 13 Level 3 li 14 Level 3 li 15 Level li 2 Level 11 Javascript part Copy code The code is as follows: var navigationBar = function () { //When using, replace the testid attribute with the href attribute var currentUrlHref = "jj"; var root = $("ul[hid='root']"); $(root).find(">li").attr("first_level ", true); $(root).find(">li>a").addClass("nav_first_style"); //Recursively search for expandable elements and bind the toggle expansion event var searchChildren = function (root) { if (root.find(">li").length > 0) { $(root).addClass("ul_style"); var liChildren = root.find(">li"); $(liChildren).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(">a"); //During initial loading, determine whether the current url matches what is in the navigation bar 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 non-first-level nodes 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(">a")); } } } //Recursively find the initial position var findInitPosition = function (aLink) { var currentLi = $(aLink).parent(); if ($(currentLi).parent().parent().find(">a").length > 0 ) { findInitPosition($(currentLi).parent().parent().find(">a")); } 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 styles 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 level node style upwards 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 Navigation var createNav = function () { searchChildren(root); } createNav(); } var initNav = new navigationBar(); However, it has not been encapsulated into a writing method similar to jquery yet. In fact, it can continue to be encapsulated into a control~