아코디언 메뉴 accordion menu
본문 바로가기

Frontend/Markup

아코디언 메뉴 accordion menu

See the Pen XWKZBZR by LeeEugene1 (@leeeugene1) on CodePen.

    const mainMenu = document.querySelectorAll('.mobileAccordion--main')
    
    mainMenu.forEach((e,i) => {
    	//방법1. dom직접선택
        e.addEventListener('click',()=>{
            mainMenu[i].classList.toggle('active')
        })
        
        //방법2. 일반함수+this이용
        // e.addEventListener('click',function(){
        //     console.log(this)
        //     this.classList.toggle('active')
        // })
    })

this는 화살표함수에서는 window객체로 인식하기때문에(이경우 바인딩필요)

일반함수를 사용해야 mainMenu dom을 선택할 수 있다.

반응형