jQueryのアコーディオンメニュー - トグルアイコンTriger

Question

は私はJSであまりよくないと私は私がトリガーとしてアイコンでアコーディオンメニューを作成しようとしている

いくつかの助けを必要としています。アイコンが（Open -/Close +）に切り替わるはずです。私はトリガーに "アクティブ"クラスを切り替えることでそれを作った。あなたは、アクションにここ

見ることができます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'); 
}); 

それは基本的に1を追加する前に、そこにすべてのアクティブなクラスを削除あなたはアクティブになりたい

試しましたjsFiddleです。

PS：更新されました。