최근 프로젝트에는 간단한 다단계 드롭다운 메뉴가 필요합니다. 그러나 비즈니스 및 스타일 요구 사항으로 인해 단순성을 위해 인터넷에서 찾은 많은 탐색 메뉴 컨트롤이 적합하지 않아 갑자기 직접 작성해야 한다는 생각이 들었습니다. ~ 시간되면 하세요~ HTML부분 코드복사 코드는 다음과 같습니다 SuperFish 레벨 1 li 1 레벨 2 li 1 레벨 2 li 2< /a> 레벨 3 li 1 레벨 3 li 2 레벨 3 li 3 레벨 3 li 4< ;/a> 레벨 3 li 5 레벨 3 li 6 ul>< a href="javascript:void(0)" testid="jj">레벨 4 li 1 ;a href="javascript:void(0) " testid="kk">레벨 4 li 2 > < /li> 레벨 2 li 3 레벨 3 li 6 ;li>레벨 3 li 7 레벨 3 li 8 레벨 3 li 9 레벨 3 li 10 < /ul> < ;ul> 레벨 3 li 11 ;/li> 레벨 3 li 12 ;레벨 3 li 13 레벨 3 li 14 ;li>레벨 li 2 레벨 11 자바스크립트 부분코드 복사 코드는 다음과 같습니다. <br>var NavigationBar = function () { <br>//사용 시 testid 속성을 href 속성으로 교체하세요<br>var currentUrlHref = "jj"; <br>var root = $("ul[hid='root']") <br>$(root).find(">li").attr("first_level ", true); <br>$(root).find(">li>a").addClass("nav_first_style"); <br>//확장 가능한 요소를 재귀적으로 검색하고 토글 확장 이벤트 바인딩<br> var searchChildren = function (root) { <br>if (root.find(">li").length > 0) { <br>$(root).addClass("ul_style") <br> var liChildren; = root.find(">li"); <br>$(liChildren).each(function (idx, item) { <br>searchChildren($(item)); <br>}) <br> } else if (root.find(">ul").length > 0) { <br>$(root).addClass("li_style") <br>if ($(root).attr("first_level ") != true.toString()) { <br>$(root).find(">a").addClass("li_style_a") <br>} <br>var aLink = $(root) find( ">a") <br>//초기 로드 중에 현재 URL이 탐색 모음에 있는 URL과 일치하는지 확인합니다<br>if (currentUrlHref == $(aLink).attr("testid")) { <br>findInitPosition(aLink); <br>} <br>$(aLink).toggle(function () { <br>$(this).addClass("li_style_a_selected"); <br>$(this).parent( ).find(">ul").show("fast"); <br>//첫 번째 수준이 아닌 노드 아래의 모든 형제 요소 숨기기<br>if ($(this).parent().attr ( "first_level") != true.toString()) { <br>$(this).parent().siblings().find(">a").removeClass("li_style_a_selected") <br>$ ( this).parent().siblings().each(function (idx, item) { <br>removeClassAndHide(item); <br>}) <br>} else { <br>$(this).addClass( " nav_first_style_selected"); <br>$(this).removeClass("li_style_a_selected"); <br>$(this).parent().siblings().find(">a").removeClass("nav_first_style_selected" ) ; <br>$(this).parent().siblings().each(function (idx, item) { <br>removeClassAndHide(item); <br>}) <br>} <br>}, function ( ) { <br>if ($(this).parent().attr("first_level") == true.toString()) { <br>$(this).addClass("nav_first_style_selected") <br> $ (this).parent().siblings().find(">a").removeClass("nav_first_style_selected") <br>} <br>removeClassAndHide($(this).parent()); }) <br>var ulChildren = root.find(">ul") <br>$(ulChildren).each(function (idx, item) { <br>$(item).hide(); <br>searchChildren($(item)); <br>}); <br>} else { <br>if ($(root).attr("first_level") != true.toString()) { <br> $ (root).find(">a").addClass("li_style_a") <br>} <br>$(root).addClass("li_style") <br>$(root).click( function () { <br>if ($(root).attr("first_level") != true.toString()) { <br>$(this).find(">a").addClass("li_style_a_selected " ); <br>$(this).siblings().find(">a").removeClass("li_style_a_selected") <br>$(this).siblings().each(function (idx, item ) { <br>removeClassAndHide(item); <br>addFirstLevelClass(item); <br>}) <br>} else { <br>$(this).find(">a").addClass("nav_first_style_selected " ); <br>$(this).find(">a").removeClass("li_style_a_selected") <br>$(this).siblings().find(">a").removeClass( " nav_first_style_selected"); <br>removeClassAndHide(this); <br>} <br>}) <br>if (currentUrlHref == $(root).find(">a").attr("testid") ) { <br>findInitPosition($(root).find(">a")); <br>} <br>} <br>} <br>//재귀적으로 초기 위치 찾기<br>var findInitPosition = function (aLink) { <br>var currentLi = $(aLink).parent() <br>if ($(currentLi).parent().parent().find(">a").length > 0 ) { <br>findInitPosition($(currentLi).parent().parent().find(">a")) <br>} <br>if ($(currentLi).find(">ul ").length > 0) { <br>$(currentLi).find(">ul").show("fast"); <br>} <br>if ($(currentLi).attr(" first_level") != true.toString()) { <br>$(currentLi).find(">a").addClass("li_style_a_selected"); <br>} else { <br>$(currentLi). find(">a").addClass("nav_first_style_selected"); <br>} <br>} <br>//모든 하위 노드의 선택한 스타일을 반복적으로 삭제 <br>var RemoveClassAndHide = function (li) { <br>if ($(li).attr("first_level") != true.toString()) { <br>$(li).find(">a").removeClass("li_style_a_selected"); >$(li).find(">ul").hide("fast") <br>if ($(li).find(">ul").length > 0) { <br> $(li).find(">ul>li").each(function (idx, item) { <br>removeClassAndHide(item); <br>}) <br>} <br>} else if ( $(li).attr("first_level") == true.toString()) { <br>$(li).find(">ul").hide("fast") <br>$( li ).find(">ul>li").each(function (idx, item) { <br>removeClassAndHide(item); <br>}) <br>} else { <br>$(li) find (">ul").show("fast"); <br>$(li).find(">ul>li").each(function (idx, item) { <br>removeClassAndHide(item ) ; <br>}) <br>} <br>} <br>//첫 번째 레벨 노드 스타일을 위쪽으로 재귀적으로 추가<br>var addFirstLevelClass = function (li) { <br>if ($(li).attr ( "first_level") != true.toString()) { <br>addFirstLevelClass($(li).parent().parent()) <br>}else { <br>if (!$(li).find(">a").hasClass("nav_first_style_selected")) { <br>$(li).find(">a").addClass(" nav_first_style_selected"); <br>$(li).siblings().find(">a").removeClass("nav_first_style_selected"); <br>} <br>} <br>} <br>//생성 Navigation<br>var createNav = function () { <br>searchChildren(root); <br>} <br>createNav() <br>} <br>var initNav = new NavigationBar(); /script> <br><br> </div>그러나 아직 jquery와 유사한 작성 방법으로 캡슐화되지는 않았습니다. 실제로는 계속해서 컨트롤로 캡슐화될 수 있습니다~ <br><br>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
