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/