jquery 고수님들 답변 좀 부탁드리겠습니다 ㅠㅠ

jquery 고수님들 답변 좀 부탁드리겠습니다 ㅠㅠ

QA

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 이런식으로 특정 개체가 아닌 다른얘들이랑 같이 싸잡아서 실행시키면 그러실 수도 있습니다.

그러면요 각 메뉴의 class나 id를 안겹치게 적용해주시고 해당 메뉴 클릭했을때

클릭한 메뉴의 class나 id를 넘겨줘서 해당 class 나 id를 가진 메뉴만 active해주면 되지않을가요?

답변을 작성하시기 전에 로그인 해주세요.
전체 1,010
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT