Twitter Bootstrapアコーディオンのアイコンが変わりません

Question

ブートストラップからこのアコーディオンのものがあります。矢印アイコンは、を示します。

それから私は私が（アップCompetency1アイコン、ダウンCompetency2アイコン）を取得し、Competency1をクリックしてください：私は、私が今Competency2をクリックした場合、

しかし、取得する（コンピテンシーアイコンはです。、コンピテンシーアイコン、アップ）：

これは、ブートストラップのバグですか、それは簡単に修正されるだろうか？

ありがとうございました。

Answer 1

Competency1を既に開いている場合、Competency2をクリックするとCompetency1が折りたたまれるため、これが発生しているようです。この方法で崩壊すると、Competency1で発生するクリックイベントがないため、キャレットはまだ上向きです。

Answer 2

コードを見ずに提案をするのは難しいです。 'show'イベントでのみイメージのスワップをトリガーしている可能性があります（jsのタイプミスを確認してください）。ここで

は、私は私のサイトで同じ効果を作成するために使用するものである：

HTML：

<div class="accordion"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
       <i class="icon-chevron-down"></i> 
       Collapsible Group Item #1 
      </a> 
     </div> 
    </div> 

    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       <i class="icon-chevron-down"></i> 
       Collapsible Group Item #2 
      </a> 
     </div> 
    </div> 
</div> 

はJavaScript：

$('.accordion').on('show hide', function (n) { 
    $(n.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-up icon-chevron-down'); 
}); 

Answer 3

これは、ブートストラップのバグです。 .accordion-toggleのクラスを持つ見出しの1つを切り替えたときにマークアップを検査すると、そのクラスが折りたたまれているかどうかをトグルします。開かれているものとは異なる見出しをクリックしても、開いた要素の見出しに折りたたまれたクラスは追加されません。これは私のためにそれを修正しました：

$('.accordion-toggle').click(function() { 
    if($(this).hasClass('collapsed')) { 
     $('.accordion-toggle').not(this).addClass('collapsed'); 
    } 
}); 

Answer 4

このコードを使用してアイコンを変更できます。

スクリプト部分：

jQuery('document').ready(function() { 

$('.accordion').on('show hide', function (n) { 
    var targetEle = $(n.target).siblings('.accordion-heading').find('.accordion-toggle'); 
    if($(n.target).hasClass("in")){ 
     targetEle.children(".icon-chevron-down").show(); 
     targetEle.children(".icon-chevron-up").hide(); 
    } 
    else{ 
     targetEle.children(".icon-chevron-down").hide(); 
     targetEle.children(".icon-chevron-up").show(); 
    } 

}); 

}); 

注：このコードを使用するために、HTML部分に、あなたがイメージタグすなわち両方を含める必要があります。シェブロンアップとシェブロンダウン。

Answer 5

jquery.js 1.10.2とbootstrap-collapse.js v2.3.0を使用すると、これは上記のように再表示されます。ドキュメントをロードすると、最初のものを除くすべてのアイテムが折りたたまれ、表示/非表示のイベントが正常に処理されます。

$(document).ready(function() { 

    $(".accordion-body").on("shown", function (evt) { 
     setIcon(evt.target, true); 
    }); 

    $(".accordion-body").on("hidden", function (evt) { 
     setIcon(evt.target, false); 
    }); 

    $(".accordion-body").collapse("hide"); 
    $("#collapse-faq-1").collapse("show"); 
}); 

function setIcon(acdBody, isShown) { 
    var indicator = "indicator" + acdBody.id.substr(acdBody.id.lastIndexOf("-")); 

    if (!isShown) { 
     $("#" + indicator).removeClass("icon-chevron-up").addClass("icon-chevron-down"); 
    } else { 
     $("#" + indicator).removeClass("icon-chevron-down").addClass("icon-chevron-up"); 
    } 
} 

HTML：

<div class="accordion" id="accordion"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1"> 
       <i id="indicator-1" class="icon-chevron-down"></i>&nbsp;&nbsp; 
       FAQ Item 1 
      </a> 
     </div> 
     <div id="collapse-faq-1" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
       Answer 1 ... 
      </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2"> 
       <i id="indicator-2" class="icon-chevron-down"></i>&nbsp;&nbsp; 
       FAQ Item 2 
      </a> 
     </div> 
     <div id="collapse-faq-2" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
       Answer 2 ... 
      </div> 
     </div> 
    </div> 
</div>