jquery 고수님들 답변 좀 부탁드리겠습니다 ㅠㅠ
본문
<aside class="subCategoryList">
<div class="sC_List">
<ul class="OneDepth">
<li>
<a href="javscript:;">복사용지</a><a class="oDepthMoreBtn">하위 메뉴 더 보기</a>
<div class="TwoDepth">
<ol>
<li>
<a href="javascript:;">A4 복사용지</a>
<a href="javascript:;" class="tDepthMoreBtn"></a>
<div class="ThirdDepth">
<ol>
<li><a href="javascript:;">-80g</a></li>
<li><a href="javascript:;">-75g</a></li>
<li><a href="javascript:;">-칼라복사용지</a></li>
<li><a href="javascript:;">-친환경/장애인</a></li>
<li><a href="javascript:;">-렌터지(US규격)</a></li>
</ol>
</div>
</li>
<li><a href="javascript:;">A3 복사용지</a>
<a href="javascript:;" class="tDepthMoreBtn"></a>
<div class="ThirdDepth">
<ol>
<li><a href="javascript:;">-80g</a></li>
<li><a href="javascript:;">-75g</a></li>
</ol>
</div>
</li>
</ul>
</div>
</asdie>
좌측 카테고리 메뉴입니다.
총 3뎁스까지 있으며
버튼 클릭시 하위메뉴들이 나오며 버튼에 효과가 들어갑니다. 회전이나 이미지 변경
쿼리버전은 1.4.2 입니다.
슬라이드토글을 이용하여 짰는데 하나 누르면 나머지 카테고리들도 펼쳐집니다.
어떻게 하면 하나 메뉴 클릭시 하나의 카테고리만 노출되게 할 수 잇을까요
조언 좀 부탁드리겠습니다.
감사합니다 ㅠㅠ
답변 2
<aside class="subCategoryList">
<div class="sC_List">
<ul class="OneDepth">
<li>
<a href="javscript:;">복사용지</a>
<a class="oDepthMoreBtn" onclick="slide_toggle('TwoDepth');">하위 메뉴 더 보기</a>
<div class="TwoDepth">
<ol>
</li>
<li>
<a href="javascript:;">A4 복사용지</a>
<a class="tDepthMoreBtn" onclick="slide_toggle('ThirdDepth')></a>
<div class="ThirdDepth">
<ol>
<li><a href="javascript:;">-80g</a></li>
<li><a href="javascript:;">-75g</a></li>
<li><a href="javascript:;">-칼라복사용지</a></li>
<li><a href="javascript:;">-친환경/장애인</a></li>
<li><a href="javascript:;">-렌터지(US규격)</a></li>
</ol>
</div>
</li>
</ul>
</div>
</asdie>
<script>
function slide_toggle(i){
$("."+i+"").slideToggle("slow");
}
</script>
마감태그가 이상한것 같긴한데 각 onclick 이벤트로 클래스명 넘겨서 작동시키면 될것 같습니다..
이렇게 해도 전체 카테고리가 다 열리네요 ㅠㅠ
원본소스가 너무 길어서 상단 부분만 짤라서 가져온거라 그렇습니다 ㅠㅠ
혹시 페이지 주소를 알수 있을까요???
로컬에서 작업중입니다 ㅠㅠ
슬라이드 기능은 해결했는데
$(".tDepthMoreBtn").click(function(){
var submenu = $(this).next(".ThirdDepth");
var onmenu = $(this).prev('.tDepthOn');
// 2뎁스 버튼 클릭시 액티브 클래스 부여
onmenu.toggleClass('active');
submenu.slideToggle();
});
onmenu 부분에 버튼 클릭시 active 클래스를 부여하고 싶은데 저렇게 했더니 맨처음에만 적용이 되고 이외의 부분에는 적용이 안되는데 혹시 이건 왜 그런지 알 수 있을까요?ㅠㅠ
펼치고자하는 특정 class나 id에 액션을 주시면 되지 않을까요?
li나 div a 이런식으로 특정 개체가 아닌 다른얘들이랑 같이 싸잡아서 실행시키면 그러실 수도 있습니다.
클래스에 액션을 넣었는데, 공통적인 요소들이다 보니 하나 클릭시 전체 다 실행이 되서요..ㅠㅠ
그렇다면 클릭시 실행되는거에 this로 넣어주면 그 누른놈만 되지않나요?
jquery가 약해서 해도 잘 안되더라구요..ㅠㅠ
그러면요 각 메뉴의 class나 id를 안겹치게 적용해주시고 해당 메뉴 클릭했을때
클릭한 메뉴의 class나 id를 넘겨줘서 해당 class 나 id를 가진 메뉴만 active해주면 되지않을가요?
