JS / 바닐라로 아코디언 메뉴 만들기

이번 퍼블건에서는 제이쿼리를 사용하지 않고 바닐라로 해보기로 하였다.

제이쿼리를 사용했으면 간단한 구현이였지만 바닐라로 하려니 꾀나 복잡해졌다.

 max-height:0, transition, oaveflow:hidden CSS처리를 해줘야한다

 

	<ul class="gnb_mo">
            <li>
                <a href="javascript:;" class="lang">
                    <span>Langage</span>
                    <p>한국어</p>
                </a>
                <ul class="depth">
                    <li><a href="/">한국어</a></li>
                    <li><a href="/">ENGLISH</a></li>
                    <li><a href="/">中文简体</a></li>
                    <li><a href="/">中文繁體</a></li>
                </ul>
            </li>
            <li><a href="/">로그인</a></li>
            <li>
                <a href="javascript:;" class="arrow">공지사항</span></a>
                <ul class="depth">
                    <li><a href="/">공지사항</a></li>
                    <li><a href="/">FAQ</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;" class="arrow">매거진</span></a>
                <ul class="depth">
                    <li><a href="/">사용 가이드</a></li>
                    <li><a href="/">GOOD & BAD</a></li>
                </ul>
            </li>
            <li><a href="/">이벤트</a></li>
            <li>
                <a href="javascript:;" class="arrow">업로드</span></a>
                <ul class="depth">
                    <li><a href="/">업로드 가이드</a></li>
                    <li><a href="/">다운로드 가이드</a></li>
                    <li><a href="/">공지사항 가이드</a></li>
                    <li><a href="/">FAQ 가이드</a></li>
                </ul>
            </li>
        </ul>

#header .gnb_mo .depth{max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out;}

		function gnbEvt(){
                let category = document.querySelectorAll(".gnb_mo > li > a");
                let depth = document.querySelectorAll(".gnb_mo .depth");

                let i,j,k;

                for (i = 0; i < category.length; i++) {
                category[i]?.addEventListener("click", function() {
                    let content = this.nextElementSibling;

                    for(j = 0; j < category.length; j++){
                        category[j].classList.remove("active");
                    }
                    for(k = 0; k < depth.length; k++){
                        depth[k].style.maxHeight = null;
                    }
                
                    this.classList.add("active");
                    if (content.style.maxHeight){
                        content.style.maxHeight = null;
                    } else {
                        
                        content.style.maxHeight = content.scrollHeight + "px";
                    } 
                });
                }
            }
            gnbEvt();