개요
오늘은 tistory category 접기 / 펼치기 기능 구현을 정리해보려 합니다.
최근 블로그 정리를 하면서 카테고리의 재구성 했습니다.
재구성을 하고 보니 Category가 전부 펼쳐저 있으니 너무 많아서 지저분하고 정신 산만한 느낌을 받았습니다.
그래서 Category의 기본 설정을 접음 상태로 하는 방법을 알아봤고 적용했습니다.
이 글은 어떻게 했는지를 정리한 글 되겠습니다.
구현
관리자 페이지 > 꾸미기 > 스킨 편집 > html 편집 순서로 이동합니다.
html 탭의 <body> ~ </body> 사이에 다음 소스 코드를 추가합니다.
<script>
$(function() {
$("ul.category_list > li:has(ul) > a").addClass("custom-category-sub").removeAttr('href'),
$("a.custom-category-sub").click( function() {
$(this).siblings().slideToggle();
});
});
</script>
코드의 동작 내용은 아래와 같다 하네요.
폴더(=상위 카테고리)에 custom-category-sub이라는 클래스를 addClass() 메서드를 사용하여 추가하고 href 애트리뷰트를 removeAttr() 메서드를 사용하여 제거한다. href 애트리뷰트를 제거하면 상위 카테고리를 클릭하면 링크가 이동되지 않고 하위 카테고리가 접기/펼치기 된다.
위의 코드를 적용했으면 접기/펼치기 기능은 활성화되지만 Category의 기본 설정은 열림입니다.
블로그 접속 시 카테고리가 접힘 상태로 하고 싶으면 다음 소스 코드를 CSS 탭에 추가합니다.
.sub_category_list { display:none }
위의 작업을 마치면 Category가 접힘 상태인 것을 확인할 수 있을 겁니다.
참조
https://developer-talk.tistory.com/530
