아코디언 많은 뎁스
조회수 625회
아코디언 뎁스를 만들던 중 실행이 자꾸 안 돼서 질문 올립니다.
<html>
<div class="accordion">
<div class="accordion_wrap">
<h2>패션의류/언더웨어</h2>
<dl class="accordion_container">
<dt><a href="javascript:void(0)" class="accordion_toggle">여성의류</a></dt>
<dd class="accordion_content">
<ul class="total">
<li>전체</li>
</ul>
<a href="javascript:void(0)" class="inner_toggle">아우터</a>
<ul class="product">
<li><a href="javascript:void(0)">자켓</a></li>
<li><a href="javascript:void(0)">캐시미어</a></li>
<li><a href="javascript:void(0)">코트</a></li>
<li><a href="javascript:void(0)">가디건</a></li>
<li><a href="javascript:void(0)">점퍼</a></li>
<li><a href="javascript:void(0)">3depth 타이틀</a></li>
<li><a href="javascript:void(0)">3depth 타이틀</a></li>
<li><a href="javascript:void(0)">3depth 타이틀</a></li>
</ul>
</dd>
<dd class="accordion_content">
<a href="javascript:void(0)" class="inner_toggle">2depth 타이틀</a>
<ul class="product">
<li><a href="javascript:void(0)">자켓</a></li>
</ul>
</dd>
<dd class="accordion_content">
<a href="javascript:void(0)" class="inner_toggle">2depth 타이틀</a>
<ul class="product">
<li><a href="javascript:void(0)">자켓</a></li>
</ul>
</dd>
</dl>
</div>
</html>
<script>
$('.accordion_wrap .depth1_tit').on('click', function (e) {
console.log('test');
e.preventDefault();
$('.accordion_wrap .depth1_tit, .accordion_wrap .depth2_tit').removeClass('category_on');
$('.accordion_wrap .depth2_wrap, .accordion_wrap .depth3_wrap').stop().slideUp();
if (!$(this).next('.depth2_wrap').is(':visible')) {
$(this).addClass('category_on');
$(this).next('.depth2_wrap').stop().slideDown();
}
});
$('.accordion_wrap .depth2_tit').on('click', function (e) {
console.log('test');
e.preventDefault();
$('.accordion_wrap .depth2_tit').removeClass('category_on');
$('.accordion_wrap .depth3_wrap').stop().slideUp();
if (!$(this).next('.depth3_wrap').is(':visible')) {
$(this).addClass('category_on');
$(this).next('.depth3_wrap').stop().slideDown();
}
});`
`</script>
-
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
1 답변
-
아무래도 웹사이트 좌측메뉴라는 매우 흔한 컴포넌트를 만들고 계신 것 같은데... 권장하기 힘든 코딩 패턴이 너무 많아서 오히려 그쪽으로 감히 한 말씀 보태고자 합니다.
dl,dt,dd는 어떤 용어와 그 정의를 위해 사용하는 목록 태그이므로, 메뉴와 같이 일반적인 목록에 사용하시면 (스크린 리더, 검색엔진 로봇 등등이 여기에 아주 특별한 의미를 부여해 버리기 때문에) 좋지 않습니다. 그냥ul/ol,li를 사용하는 것을 권장합니다..removeClass()와.stop().slideUp()이 한꺼번에 사용되는 이유를 모르겠습니다. 엄밀히 말하면, 둘은 서로 다른 접근법을 취하는 것입니다. 가급적 둘 중 한 가지 접근으로만 처리하시기를 권장합니다.is(':visible')은 JS가 계산을 하는 데 시간이 걸리고, 예외 케이스가 발생하기 아주 좋으며, 브라우저/jQuery 버전을 탈 우려가 있는 방식입니다. 이보다 더 근본적인 접근법을 찾으시는 것이 좋습니다.
남들이 만들어놓은 좋은 사례들이 많습니다. 참고해 보세요.
댓글 입력