引導3中的手風琴切換不更改圖標

Question

我有使用bootstrap 3和jQuery進行多重/動態手風琴切換的代碼：

$('div.accordion-body').on('shown', function () {
    $(this).parent("div").find(".fa").removeClass("fa fa fa-plus").addClass("fa fa-minus");

});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div").find(".fa").removeClass("fa fa-minus").addClass("fa fa fa-plus");
}); 

但是在bootstrap 3中，更改圖標（ fa-plus到fa-minus ）不起作用。 如何解決這個問題？

Bootstrap 3 DEMO

Answer 1

由於在Bootstrap 3中， shown和hidden的events已更改為show.bs.collapse和hide.bs.collapse ：

$('div.accordion-body').on('show.bs.collapse', function () {
    $(this).parent("div").find(".fa").removeClass("fa fa fa-plus").addClass("fa fa-minus");

});

$('div.accordion-body').on('hide.bs.collapse', function () {
    $(this).parent("div").find(".fa").removeClass("fa fa-minus").addClass("fa fa fa-plus");
});

DEMO

Answer 2

從2.x開始，事件名稱已更改。 在此處查看新事件http://getbootstrap.com/javascript/#collapse-events

$('div.accordion-body').on('shown.bs.collapse', function () {
    $(this).parent("div").find(".fa").removeClass("fa fa fa-plus").addClass("fa fa-minus");
});

$('div.accordion-body').on('hidden.bs.collapse', function () {
    $(this).parent("div").find(".fa").removeClass("fa fa-minus").addClass("fa fa fa-plus");
});