jQuery 아코디언 메뉴 - 토글 아이콘 Triger

Question

나는 JS가별로 좋지 않아 도움이 필요하다.

나는 아이콘으로 아코디언 메뉴를 만들려고한다. 아이콘이 (열기/닫기 +)로 전환되어야합니다. 방아쇠에 "활성"클래스를 토글 링하여 만들었습니다. 당신은 행동에 여기

볼 수 http://jsfiddle.net/zbwub/4/

HTML :

<div class="acc_menu"> 

    <div class="acc_menu_item"> 
       <div class="acc_menu_title">      
        <h3><a href="#">CAT 1</a></h3> 
        <span class="ico"></span> 
       </div> 
       <div class="acc_menu_sub"> 
        <ul> 
         <li><a href="#">Sub cat 1-1</a></li> 
         <li><a href="#">Sub cat 1-2</a></li> 
         <li><a href="#">Sub cat 1-3</a></li> 
        </ul> 
       </div> 
    </div> 
    <div class="acc_menu_item"> 
       <div class="acc_menu_title">     
        <h3><a href="#">CAT 2</a></h3> 
        <span class="ico"></span> 
       </div> 
       <div class="acc_menu_sub"> 
        <ul> 
         <li><a href="#">Sub cat 2-1</a></li> 
         <li><a href="#">Sub cat 2-2</a></li> 
         <li><a href="#">Sub cat 2-3</a></li> 
        </ul> 
       </div> 
    </div> 

    <div class="acc_menu_item"> 
       <div class="acc_menu_title">     
        <h3><a href="#">CAT 3</a></h3> 
        <span class="ico"></span> 
       </div> 
       <div class="acc_menu_sub"> 
        <ul> 
         <li><a href="#">Sub cat 3-1</a></li> 
         <li><a href="#">Sub cat 3-2</a></li> 
         <li><a href="#">Sub cat 3-3</a></li> 
        </ul> 
       </div> 
    </div> 
</div> 

JQuery와 :

$(".acc_menu_sub").hide(); 

$(".acc_menu_title .ico").toggle(function(){ 
     $(this).addClass("active"); 
}, function() { 
     $(this).removeClass("active"); 
}); 

$(".acc_menu div div .ico").click(function(){ 
     if(false == $(this).parent().parent().children(".acc_menu_sub").is(':visible')) { 
      $('.acc_menu .acc_menu_sub').slideUp(300,'easeInQuad'); 
     }   
     $(this).parent().parent().children(".acc_menu_sub").slideToggle(300,'easeInQuad'); 
}); 

그러나 문제는 내가 그것을 만드는 방법을 알아낼 수 있다는 것입니다 바로 작동합니다. 활성화되지 않은 메뉴를 클릭하면 액티브가 닫히지 만 아이콘은 변경되지 않습니다.

감사합니다, Serghey

해결했다

$(".acc_menu_sub").hide();  

    $(".acc_menu div div .ico").click(function(){   
     if(false == $(this).parent().parent().children(".acc_menu_sub").is(':visible')) { 
      $(".acc_menu div div .ico").removeClass("active"); 
      $(this).addClass("active"); 
      $('.acc_menu .acc_menu_sub').slideUp(300,'easeInQuad').removeClass("active");     
     }   
     $(this).parent().parent().children(".acc_menu_sub").slideToggle(300,'easeInQuad'); 
}); 

Answer 1

변경이에 대한 첫 번째 기능 :

$(".acc_menu_sub").hide(); 

$(".acc_menu div div .ico").click(function(){ 
     $('.acc_menu .acc_menu_item .acc_menu_title .ico.active').removeClass('active'); 
     if(false == $(this).parent().parent().children(".acc_menu_sub").is(':visible')) { 
      $('.acc_menu .acc_menu_sub').slideUp(300,'easeInQuad'); 
      $(this).addClass('active'); 
     } 
     $(this).parent().parent().children(".acc_menu_sub").slideToggle(300,'easeInQuad'); 
}); 

그것은 기본적으로 하나를 추가하기 전에 거기에 모든 활성 클래스를 제거 너는 활동적이되고 싶다.

시도해 본 사람이 jsFiddle입니다.

추 신 : 업데이트되었습니다.