[Javascript] 아코디언 메뉴 만들기

 

요즘은 참 편리한 시대가 되었다.

다양한 플러그인들은 더 편리한 개발환경을 제공하지만

포트폴리오를 만들며 스스로의 실력을 가늠하고 싶은 내 입장으로서는

직접 코드를 짜서 아코디언 메뉴를 만들어보고 싶었다.

(일단 너무 오랜만에 사용해보는 Javascript... 그동안 사용하지 않아 굳었던 머리를 풀고싶기도 했다. 😇)

 

그래서 이래저래 구글링을 해보고 만든 나의 아코디언 메뉴!(두둥)
사실 간단한 기능이지만 그냥 처음 아무것도 주어진게 없는 코드를 바라봤을 땐 참 막막했던 것 같다.

코드 한줄 한줄을 주석으로 해석해보았다.

 

---

 

작업을 하다보니... 예전에 작성했던 코드보다 더 간결한 코드를 찾아서 수정했다. 😇

(아래는 예전에 작성해봤던 코드)

 

 

Javascript 코드 (예전 코드)

// 1. 아코디언 메뉴의 아이템(리스트)들을 querySelectorAll로 모두 선택한다.
const accordionItems = document.querySelectorAll(".accordion__item");

// 2. querySelectorAll로 선택된 아이템들을 forEach 문을 통해 반복한다.
accordionItems.forEach((accordionItem) => {

  // 3. 아이템에 addEventListener로 click 이벤트를 준다.
  accordionItem.addEventListener("click", () => {
  
  // 4. classList.toggle을 사용하여 className(여기선 "active")이 존재하는지 확인한다.
  // 만약 존재한다면 className을 제거하고 존재하지 않으면 추가한다.
    accordionItem.classList.toggle("active");
  });

  // 추가! 엔터시에도 클래스명이 적용되도록 하자. (웹접근성 대응)
  // 1. 아이템에 keyup 이벤트를 추가한다.
  accordionItem.addEventListener("keyup", (e) => {
  // 2. 만약 해당 이벤트의 keyCode(누른 키)의 번호가 13(엔터)이면
    if (e.keyCode === 13) {
    //3. classList.toggle로 active 클래스를 추가/제거한다.
      accordionItem.classList.toggle("active");
    }
  });
})

 

결과물 (예전 코드)

 

See the Pen Untitled by Happy Hee (@8happyhee) on CodePen.

 

 

Javascript 코드

// 1. 아코디언 메뉴의 리스트들을 querySelectorAll로 모두 선택한다.
const accordionList = document.querySelectorAll(".accordion__list");

// 2. accordionList의 length 만큼 반복문을 돌린다.
for (let i = 0; i < accordionList.length; i++) {
  // 3. 아이템에 addEventListener로 click 이벤트를 준다.
  accordionList[i].addEventListener("click", () => {
    // 4. classList.toggle을 사용하여 className(여기선 "active")이 존재하는지 확인한다.
    // 만약 존재한다면 className을 제거하고 존재하지 않으면 추가한다.
    accordionList[i].classList.toggle("active");
  });
  
   // 추가! 엔터시에도 클래스명이 적용되도록 하자. (웹접근성 대응)
  // 1. 리스트에 keyup 이벤트를 추가한다.
  accordionList[i].addEventListener("keyup", (e) => {
  // 2. 만약 해당 이벤트의 keyCode(누른 키)의 번호가 13(엔터)이면
    if (e.keyCode === 13) {
    //3. classList.toggle로 active 클래스를 추가/제거한다.
      accordionList[i].classList.toggle("active");
    }
  });
}

 

결과물

See the Pen 아코디언 메뉴 만들기 by Happy Hee (@8happyhee) on CodePen.

 

 

주석이 많아서인지 조금 지저분해 보이지만... 뭐 어떤가

깔끔해 보이는 것보다 내가 다음에 봤을 때도 이해 할 수 있도록 하는게 중요하다! 💪

 

근데 다음엔 구글링을 하지 않아도 스스로 코드를 짤 수 있을만한 실력이 되어있었으면 좋겠다.

안 된다면 뭐... 여기 와서 다시 보고 복습해야지! 호호

 

 

- 끝 -