js 탐색 메뉴(자체 작성)는 간단하고 우아합니다

최근 프로젝트에는 간단한 다단계 드롭다운 메뉴가 필요합니다. 그러나 비즈니스 및 스타일 요구 사항으로 인해 단순성을 위해 인터넷에서 찾은 많은 탐색 메뉴 컨트롤이 적합하지 않아 갑자기 직접 작성해야 한다는 생각이 들었습니다. ~ 시간되면 하세요~ HTML부분

코드복사 코드는 다음과 같습니다 SuperFish 레벨 1 li 1 레벨 2 li 1 레벨 2 li 2 레벨 3 li 1 레벨 3 li 2 레벨 3 li 3 레벨 3 li 4&lt ;/a> 레벨 3 li 5 레벨 3 li 6 ul> 레벨 4 li 1 ;a href="javascript:void(0) " testid="kk">레벨 4 li 2 > 레벨 2 li 3 레벨 3 li 6 ;li> 레벨 3 li 7 레벨 3 li 8 레벨 3 li 9 레벨 3 li 10 &lt ;ul> 레벨 3 li 11 ;/li> 레벨 3 li 12 ; 레벨 3 li 13 레벨 3 li 14 ;li> 레벨 li 2 레벨 11

자바스크립트 부분

코드 복사 코드는 다음과 같습니다. var NavigationBar = function () { //사용 시 testid 속성을 href 속성으로 교체하세요 var currentUrlHref = "jj"; var root = $("ul[hid='root']") $(root).find(">li").attr("first_level ", true); $(root).find(">li>a").addClass("nav_first_style"); //확장 가능한 요소를 재귀적으로 검색하고 토글 확장 이벤트 바인딩 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") //초기 로드 중에 현재 URL이 탐색 모음에 있는 URL과 일치하는지 확인합니다 if (currentUrlHref == $(aLink).attr("testid")) { findInitPosition(aLink); } $(aLink).toggle(function () { $(this).addClass("li_style_a_selected"); $(this).parent( ).find(">ul").show("fast"); //첫 번째 수준이 아닌 노드 아래의 모든 형제 요소 숨기기 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")); } } } //재귀적으로 초기 위치 찾기 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"); } } //모든 하위 노드의 선택한 스타일을 반복적으로 삭제 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 ) ; }) } } //첫 번째 레벨 노드 스타일을 위쪽으로 재귀적으로 추가 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"); } } } //생성 Navigation var createNav = function () { searchChildren(root); } createNav() } var initNav = new NavigationBar(); /script>

그러나 아직 jquery와 유사한 작성 방법으로 캡슐화되지는 않았습니다. 실제로는 계속해서 컨트롤로 캡슐화될 수 있습니다~

js 탐색 메뉴(자체 작성)는 간단하고 우아합니다_기본 지식

SuperFish