私はブートストラップからこのアコーディオンのものを持っています。矢印アイコンが指す下。
次に、Competency1をクリックすると、(Competency1アイコン上、Competency2アイコン下)が表示されます。
しかし、今すぐCompetency2をクリックすると、次のようになります(Competency1アイコンはまだ上、Competency2アイコン上):
これはブートストラップのバグですか、それとも簡単に修正できますか?
ありがとう。
あなたのコードを見ずに提案をするのは難しいです。 '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');
});
Competency1がすでに開いているときに、Competency2をクリックすると、Competency1が折りたたまれるため、これが発生しているようです。このように折りたたまれたときにCompetency1で発生するクリックイベントがないため、キャレットはまだ上を向いています。
Jquery.js1.10.2とbootstrap-collapse.jsv2.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>
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>
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>
このコードを使用して、アイコンを変更できます。
スクリプト部分:
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部分に、両方の画像タグを含める必要があります。シェブロンアップとシェブロンダウン。
これはブートストラップのバグです。 .accordion-toggleのクラスを持つ見出しの1つを切り替えるときにマークアップを検査すると、クラスが折りたたまれているかどうかが切り替わります。開いている要素の見出しに折りたたまれたクラスは追加されませんが、開いている見出しとは別の見出しをクリックした場合。これは私のためにそれを修正しました:
$('.accordion-toggle').click(function() {
if($(this).hasClass('collapsed')) {
$('.accordion-toggle').not(this).addClass('collapsed');
}
});