아코디언 메뉴만들기

Accordion MENU-드롭다운

한것도 없이 벌써 월요일이네요~

날씨도 많이 춥구요~

오늘은 일어나서 무엇을 할까 고민하다..

아코디언 메뉴를 생각했습니다.

---

웹사이트에서 항상 들어가는 아코디언메뉴 

생각보다 어렵거나 복잡하진 않은데요~

보통 QNA에서 많이 사용하는 Accordion menu 를 제작해 보았습니다.

See the Pen bLpmmy by uicode (@uicode) on CodePen.

간략한 설명을 드리자면...

위에 코드를 보시면 우선 var에 버튼을 만들어서 담았습니다.

즉, 클릭해야 할 위치를 변수에 넣어두었습니다.

그리고 버튼을 클릭했을때 if 조건문이 들어갔습니다.

만약에 this 즉, 나 자신에게 클래스 on가 있는지 없는지를 

hasClass가 체크를 합니다.

체크를 마치고 있으면 siblings() 나 자신을 제외한 모든 요소를 removeClass()를 실행하고

없다면 나 자신의 addClass()를 실행해라 라는 아주 간단한 방법으로

Accordion menu 를 제작해 보았습니다.

---

아래 실행 화면입니다.

웹사이트에서 자주 등장하는 아코디언 메뉴인 만큼 

활용도가 높다고 생각합니다 .