Bootstrap嵌套手風琴問題

Question

在使用嵌套的Bootstrap手風琴時，我們面臨一個問題。 單擊父手風琴無紙化設置子元素圖標正在更改，反之亦然。 內部手風琴不會像其他任何普通手風琴那樣發生。

小提琴鏈接： https : //jsfiddle.net/6Lspm1k1/

使用Javascript：

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

Answer 1

因此，問題在於由於某種原因，回調一直沿手風琴觸發。

一種有效且對我而言更干凈的解決方案是使用CSS選擇器確定要顯示的內容：

我已經添加了，以便每個標頭都有一個fa-plus和一個fa-minus，並具有CSS隱藏/顯示，具體取決於類.collapsed

HTML更改自：

      <span class="fa fa-minus"></span>

至：

      <span class="fa fa-minus"></span><span class="fa fa-plus">

CSS添加：

.accordion-toggle.collapsed > .fa-minus{
    display:none;
}
.accordion-toggle > .fa-plus{
    display:none;
}
.accordion-toggle.collapsed > .fa-plus{
    display:inline;
}

https://jsfiddle.net/6Lspm1k1/3/