본문으로 바로가기

아코디언 메뉴 타입 모음

아코디언 메뉴에 대한 다양한 자바스크립트 코드 패턴을 알아봅니다.




아코디언 메뉴 JS 패턴 #1




아코디언 메뉴 JS 패턴 #2

클릭했던 메뉴를 다시 클릭하면 닫히지 않고 다른 메뉴를 클릭해야만 닫히도록 구현한 경우입니다.




아코디언 메뉴 JS 패턴 #3

삼항 연산자를 이용한 패턴입니다.




아코디언 메뉴 JS 패턴 #4

객체 리터럴 방식으로 싱글톤 패턴입니다.




아코디언 메뉴 JS 패턴 #5

생성자 함수를 이용한 패턴입니다.




아코디언 메뉴 JS 패턴 #6

모듈 패턴까지는 아니지만 유사한 패턴입니다.




아코디언 메뉴 JS 패턴(Widget Factory) #7

$.widget() 을 사용합니다.





아코디언 메뉴 JS 패턴 #8

애니메이션이 추가된 패턴입니다.



Jaehee's WebClub