사이드 탐색 막대의 단일 열 잠수함 효과 구현

이 기사는 측면 탐색 막대에서 하위 메뉴의 단일 오프닝 효과를 달성하는 방법을 개발하는 명확하고 간결한 자습서를 제공하는 것을 목표로합니다. JavaScript 코드를 수정하여 언제든지 하나의 하위 메뉴 만 확장되어 사용자 경험을 향상시켜야합니다. 우리는 코드 구현을 자세히 설명 하고이 기술을 신속하게 마스터하는 데 도움이되는 완전한 예를 제공 할 것입니다.

구현 원리

핵심 아이디어는 하위 메뉴의 헤드를 클릭 할 때마다 먼저 확장 된 하위 메뉴가 있는지 확인하는 것입니다. 그렇다면 닫고 현재 클릭 한 하위 메뉴를 확장하십시오. 이것은 확장 된 상태에 항상 단 하나의 하위 메뉴 만 있음을 보장합니다.

코드 구현

이 기능을 구현하기 위해 JavaScript 코드를 수정하는 단계는 다음과 같습니다.

1. 모든 SUBMENU 헤더 요소를 가져옵니다. Document.QuerySelectorall을 사용하여 모든 .sub_menu_header 요소를 가져옵니다.

2. 각 하위 메뉴 헤더에 대한 클릭 이벤트 리스너 추가 : 모든 하위 메뉴 헤더 요소를 반복하고 각 요소에 대한 클릭 이벤트 리스너를 추가하십시오.

3. 클릭 이벤트 핸들러 함수에서 먼저 열린 하위 메뉴를 닫으십시오 : 클릭 이벤트 핸들러 함수에서 먼저 document.queryselector ( ". sub_menu_body.active")를 사용하여 현재 활성 클래스가있는 .sub_menu_body 요소가 있는지 여부를 찾으십시오. 발견 된 경우 ClassList.Remove ( "Active")를 사용하여 클래스 이름을 제거하십시오.

4. 그런 다음 현재 클릭 된 하위 메뉴의 디스플레이 상태를 전환하십시오.

다음은 수정 된 JavaScript 코드입니다.

 const sub_menu = document.querySelectorall ( '. sub_menu');
sub_menu.foreach ((항목) => {
    const submenuheader = item.queryselector ( '. sub_menu_header')
    const submenubody = item.querySelector ( '. sub_menu_body')
    submenuheader.addeventListener ( 'click', () => {
        // 열린 잠수함을 닫습니다 if (document.querySelector ( ". sub_menu_body.Active")) {
            document.querySelector ( ". sub_menu_body.active"). classlist.remove ( "active");
        }

        // 현재 서브 메뉴 SUBMENUBODY.CLASSLIST.TOGGLE ( 'Active')의 표시 상태를 전환합니다.
    })
})

이 코드는 먼저 활성화 된 하위 메뉴가 있는지 확인하고 그렇다면 활성 클래스를 제거하여 폐쇄합니다. 그런 다음 현재 클릭 한 하위 메뉴의 활성 클래스를 토글하여 잠수함이 닫히면 열고 열린 경우 닫습니다.

완전한 예

다음은 전체 HTML, CSS 및 JavaScript 샘플 코드입니다.

html (index.html) :

 



    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width, 초기 스케일 = 1.0">
    <meta http-equiv="x-ua compatible" content="ie = edge">
    <link rel="스타일" href="./%20style.css">
    <title> 측면 Nav </title>



    <nav id="nav_menu_query_off">
        
            <li class="main_list_item">
                <div class="menu_header"> 메뉴 1 </div>
                <div class="menu_body">
                    <menu class="sub_menu">
                        <div class="sub_menu_header"> 서브 메뉴 One </div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"> <a href=""> link one </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 2 </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 3 </a> </li>
                            <li class="inner_list_item"> <a href=""> link four </a> </li>
                            <li class="inner_list_item"> <a href=""> link 5 </a> </li>
                            <li class="inner_list_item"> <a href=""> link six </a> </li>
                            <li class="inner_list_item"> <a href=""> link seven </a> </li>
                        </div>
                    메뉴>
                    <menu class="sub_menu">
                        <div class="sub_menu_header"> 서브 메뉴 2 </div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"> <a href=""> link one </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 2 </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 3 </a> </li>
                            <li class="inner_list_item"> <a href=""> link four </a> </li>
                            <li class="inner_list_item"> <a href=""> link 5 </a> </li>
                            <li class="inner_list_item"> <a href=""> link six </a> </li>
                            <li class="inner_list_item"> <a href=""> link seven </a> </li>
                        </div>
                    메뉴>
                    <menu class="sub_menu">
                        <div class="sub_menu_header"> 서브 메뉴 3 </div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"> <a href=""> link one </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 2 </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 3 </a> </li>
                            <li class="inner_list_item"> <a href=""> link four </a> </li>
                            <li class="inner_list_item"> <a href=""> link 5 </a> </li>
                            <li class="inner_list_item"> <a href=""> link six </a> </li>
                            <li class="inner_list_item"> <a href=""> link seven </a> </li>
                        </div>
                    메뉴>
                </menu>
</menu>
</menu>
</div>
            </li>
            <li class="main_list_item">
                <div class="menu_header"> 메뉴 2 </div>
                <div class="menu_body">
                    <menu class="sub_menu">
                        <div class="sub_menu_header"> 서브 메뉴 One </div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"> <a href=""> link one </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 2 </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 3 </a> </li>
                            <li class="inner_list_item"> <a href=""> link four </a> </li>
                            <li class="inner_list_item"> <a href=""> link 5 </a> </li>
                            <li class="inner_list_item"> <a href=""> link six </a> </li>
                            <li class="inner_list_item"> <a href=""> link seven </a> </li>
                        </div>
                    메뉴>
                    <menu class="sub_menu">
                        <div class="sub_menu_header"> 서브 메뉴 2 </div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"> <a href=""> link one </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 2 </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 3 </a> </li>
                            <li class="inner_list_item"> <a href=""> link four </a> </li>
                            <li class="inner_list_item"> <a href=""> link 5 </a> </li>
                            <li class="inner_list_item"> <a href=""> link six </a> </li>
                            <li class="inner_list_item"> <a href=""> link seven </a> </li>
                        </div>
                    메뉴>
                    <menu class="sub_menu">
                        <div class="sub_menu_header"> 서브 메뉴 3 </div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"> <a href=""> link one </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 2 </a> </li>
                            <li class="inner_list_item"> <a href=""> 링크 3 </a> </li>
                            <li class="inner_list_item"> <a href=""> link four </a> </li>
                            <li class="inner_list_item"> <a href=""> link 5 </a> </li>
                            <li class="inner_list_item"> <a href=""> link six </a> </li>
                            <li class="inner_list_item"> <a href=""> link seven </a> </li>
                        </div>
                    메뉴>
                </menu>
</menu>
</menu>
</div>
            </li>
        메뉴>
    </nav>

위 내용은 사이드 탐색 막대의 단일 열 잠수함 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!