クリックアコーディオンで2回の矢印の位置が変わらない

Question

アコーディオンには「上」と「下」の矢印を使用していますが、うまくいきます。説明

：すべてのパネルタイトルは「A」を示し

を私が代わりに「アップ」と「ダウン」矢印、 ページのロードの「A」と「B」を使用この例では、 たら、パネルのタイトル「A」をクリックすると「B」に変わりますが、再度「B」をクリックすると「A」に変わりません。

$('#leftMenu .panel-title a').click(function(){ 
    $('#leftMenu .panel-title a').parent('.panel-title').removeClass('accordion-opened'); 
    $(this).parent('.panel-title').addClass('accordion-opened'); 
}); 

JSFiddle Here

Answer 1

によると、このソリューションは働くだろう、その後accordion-openedクラスを追加および削除することができます。 Updated fiddle。

現在の/クリックされたものをスキップするようにJSを変更します。

$('#leftMenu .panel-title a').click(function() { 
    $('#leftMenu .panel-title').not($(this).parent('.panel-title')).removeClass('accordion-opened'); 
    $(this).parent('.panel-title').toggleClass('accordion-opened'); 
}); 

注：Aneesh Sivaramanによって

策が失敗しています。確認する：

1. 2番目のアコーディオン（Program Description）を1回クリックします。
2. は今最初のアコーディオン（Issue Type）をクリックしてください - それはまだA

Answer 2

このupdated fiddle

に、我々は第二の時間をクリックすると、 'アコーディオン開かれた' クラスを追加する必要はありませんを確認してください。

Answer 3

自分でクラスを追加し、その

$('#leftMenu .panel-title a').click(function() { 
 
    $('#leftMenu .panel-title a').parent('.panel-title').removeClass('accordion-opened'); 
 
    if ($(this).hasClass('opened')) { 
 
    $(this).removeClass('opened'); 
 
    $(this).parent('.panel-title').removeClass('accordion-opened'); 
 
    } else { 
 
    $(this).addClass('opened'); 
 
    $(this).parent('.panel-title').addClass('accordion-opened'); 
 
    } 
 
});

#leftMenu .accordion-toggle:after { 
 
    font-family: 'FontAwesome'; 
 
    content: "A"; 
 
    float: right; 
 
} 
 
#leftMenu .accordion-opened .accordion-toggle:after { 
 
    content: "B"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="leftMenu" class="panel-group"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
\t \t \t \t \t \t \t \t <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#tab-1">Issue Type</a> 
 
\t \t \t \t \t \t \t </h4> 
 
    </div> 
 
    <div id="tab-1" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     <h1>Issue Type</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
\t \t \t \t \t \t \t \t <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#tab-2">Program Description</a> 
 
\t \t \t \t \t \t \t </h4> 
 
    </div> 
 
    <div id="tab-2" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     <h1>Program Description</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--/#leftMenu-->