아코디언 메뉴를 간단하게 수정하는 방법
".linked"를 클릭하면 지정한 "data-target"의 서브메뉴를 보여준다. 서브메뉴를 여러개 만들시 Attribute만 다르게 해주면 된다.
"icon-plus-circle"은 웹 폰트의 기본 상태,
".linked"클릭될 때 "icon-minus-circle" 로 변경된다.
서브메뉴를 처음에 보여주고 싶으면 "hide"를 제거하면 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div><a class="linked" data-target="link1">메인 메뉴 1<i class="icon-plus-circle"></i></a></div> <span> <ul class="link1 hide"> <li><a href="#">서브 메뉴 1-1</a></li> <li><a href="#">서브 메뉴 1-2</a></li> </ul> </span> <div><a class="linked" data-target="link2">메인 메뉴 2 <i class="icon-plus-circle"></i></a></div> <span> <ul class="link2 hide"> <li><a href="#">서브 메뉴 2-1</a></li> <li><a href="#">서브 메뉴 2-2</a></li> </ul> </span> /* JQuery */ $(".linked").click(function() { $("." + $(this).data("target")).toggle(250), $("i", this).toggleClass("icon-plus-circle icon-minus-circle") }); | cs |
원래 하고 싶었던 것은 클릭하면 서브메뉴가 하나 보여지고 다른 메뉴를 클릭하면 기존에 열렸던 서브메뉴가 닫히는 방법을 하고 싶은데...,
단순히 메뉴만으로는 할수가 있지만 + , - 표시를 하고자하면 서브메뉴가 나오면 + , - 동작을 하지 않아...,
여기서 막혀서 고민중이다.
아래의 이미지를 참고하면 쉽게 이해될거라 생각한다.
아코디언 메뉴를 구현하는 스크립트가 많던데..., 너무 복잡하고 길기도 길어서 코드의 길이를 짧게 표현하는 방법을 고민했다.
나의 경우 티스토리 카테고리에 아코디언 메뉴를 사용하지 않지만...,
혹시, 티스토리 카테고리에 아코디언 메뉴 사용하는 방법은 여기를 참고하면 된다.
스킨 보면 볼수록 정말 괜찮은거 같아요.^^