Bootstrap嵌套手风琴问题

Question

我们在使用嵌套引导手风琴时遇到了问题。单击父手风琴无纸化设置子元素图标正在发生变化，反之亦然。它不应该发生，内部手风琴就像任何其他正常的手风琴一样。

小提琴链接： 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/