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을 선택할 수 있다.
반응형
'Frontend > Markup' 카테고리의 다른 글
HTML 시맨틱태그 정리 (0) | 2021.04.12 |
---|---|
checkbox 커스텀, select All (0) | 2020.10.29 |
[flexbox] 여러줄을 표현하는 wrap, column (0) | 2020.08.26 |
[css] div를 상하좌우 중앙정렬 (0) | 2020.08.13 |
[css] ellipsis로 multiple lines '...'처리 (0) | 2020.07.28 |