如何在bootstrap中为accordion添加一个加号或减号？折叠关闭时显示加号，打开折叠时显示减号

在Bootstrap中为accordion添加一个加号或减号，可以通过自定义CSS样式和JavaScript来实现。下面是一种常见的实现方法：

首先，在HTML中添加一个accordion组件，例如：

<div id="accordion" class="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Section 1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Content for section 1
      </div>
    </div>
  </div>
</div>

接下来，添加自定义的CSS样式来设置加号和减号的显示。在CSS文件中添加以下代码：

.accordion .btn-link::before {
  content: '+';
  float: left;
  margin-right: 5px;
}

.accordion .btn-link[aria-expanded="true"]::before {
  content: '-';
}

这段代码将为所有的accordion按钮添加一个加号，并在展开时将加号替换为减号。

最后，引入Bootstrap和jQuery库，并在JavaScript文件中添加以下代码来初始化accordion组件：

$(document).ready(function() {
  $('#accordion').on('show.bs.collapse', function() {
    $(this).find('.btn-link').attr('aria-expanded', 'true');
  }).on('hide.bs.collapse', function() {
    $(this).find('.btn-link').attr('aria-expanded', 'false');
  });
});

这段代码将在accordion展开和折叠时更新按钮的aria-expanded属性，以便正确显示加号和减号。

通过以上步骤，就可以在Bootstrap的accordion组件中为每个折叠项添加一个加号或减号，以表示其状态。