切换BS 4.x卡标头中的加号和减号

Question

我正在尝试学习Bootstrap。我有下面引用的代码。问题是：

1-扩展卡时，我希望将加号更改为减号，但是这种情况没有发生。如何解决这个问题？我不想在正文末尾使用单独的js函数。

2-当我使用下面的代码时，出现一个奇数正方形，当使用“ fas”代替fa时，正方形消失了。我假设“ fas”是免费的，并且由于我没有订阅，所以这会导致正方形出现。这是正确的吗？

onclick="$('#collapseOne').toggleClass('fa-fa-minus-square fa-plus-square')"

jsfiddle包含以下代码： Problem Code

谢谢大家的帮助。

Answer 1

您几乎没有小错/错，在HTML的第9行id =“＃collapseOne”应该是id =“ collapseOne”，而在HTML的第8行则不是很好的Font awesome类名。

<div class="container">
   <div id="accordion" class="accordion">
      <div class="card mb-0">
         <div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
            <a class="card-title"
               onclick="$('#collapseOneSquare').toggleClass('fas fa fa-minus-square fas fa fa-plus-square')">
            	<i class="fas fa fa-plus-square fa-pull-right p-1" id="collapseOneSquare"></i>
            		Card Header Text
            </a>
         </div>
         <div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
            <p>XXXXXXXXX Contents XXXXXXXXXX</p>
         </div>
      </div>
   </div>
</div>