아코디언 뎁스를 만들던 중 실행이 자꾸 안 돼서 질문 올립니다.
<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>