如何在Bootstrap 4卡片表格行折叠时切换Font Awesome图标

首先，我注意到你的代码里第二个折叠项的HTML没写完，而且缺少监听折叠状态变化的JavaScript逻辑，这就是图标没法切换的核心原因。下面我会帮你补全代码并实现图标切换的功能。

问题分析 #

你需要实现的是：点击折叠面板的标题行时，对应图标在fa-chevron-right（收起状态）和fa-chevron-down（展开状态）之间切换。Bootstrap的折叠组件本身不会自动处理图标切换，所以需要我们通过监听它的状态事件来手动切换图标类。

完整解决方案代码 #

先补全你的HTML结构，再添加对应的JavaScript逻辑：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div id="accordion">
  <div class="card">
    <div class="list-group-item" id="headingOne">
      <h5 class="mb-0">
        <label data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <!-- 初始展开状态用向下箭头 -->
          <i class="fa fa-chevron-down"></i><label style="margin-left:20px;">Configure which userdata to show for voice interactions</label>
        </label>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <div class="card-block">
          <li class="list-group-item">
            <div>
              <div class="card-block">
                <div class="card-header">
                  <div class="row">
                    <div class="col-md-3"><b>Label</b></div>
                    <div class="col-md-3"><b>Userdata</b></div>
                    <div class="col-md-6 text-right">
                      <button type="button" data-toggle="modal" data-target="#optionModal" class="btn btn-default btn-sm"><i class="fa fa-plus-circle"></i> <b>Optie</b> toevoegen</button>
                    </div>
                  </div>
                </div>
                <div>
                  <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      <div class="col-md-3"> Label sdlsdkfjsdlfksdj </div>
                      <div class="col-md-3"> Userdata dflskdfjds </div>
                      <div class="col-md-6 text-right">
                        <span><i class="fa fa-pencil" style="font-size:20px;"></i></span>
                        <span><i class="fa fa-trash" style="font-size:20px; margin-left:20px;"></i></span>
                      </div>
                    </li>
                  </ul>
                  <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      <div class="col-md-3"> Label sdlsdkfjsdlfksdj </div>
                      <div class="col-md-3"> Userdata dflskdfjds </div>
                      <div class="col-md-6 text-right">
                        <span><i class="fa fa-pencil" style="font-size:20px;"></i></span>
                        <span><i class="fa fa-trash" style="font-size:20px; margin-left:20px;"></i></span>
                      </div>
                    </li>
                  </ul>
                  <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      <div class="col-md-3"> Label sdlsdkfjsdlfksdj </div>
                      <div class="col-md-3"> Userdata dflskdfjds </div>
                      <div class="col-md-6 text-right">
                        <span><i class="fa fa-pencil" style="font-size:20px;"></i></span>
                        <span><i class="fa fa-trash" style="font-size:20px; margin-left:20px;"></i></span>
                      </div>
                    </li>
                  </ul>
                  <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                      <div class="col-md-3"> Label sdlsdkfjsdlfksdj </div>
                      <div class="col-md-3"> Userdata dflskdfjds </div>
                      <div class="col-md-6 text-right">
                        <span><i class="fa fa-pencil" style="font-size:20px;"></i></span>
                        <span><i class="fa fa-trash" style="font-size:20px; margin-left:20px;"></i></span>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="list-group-item" id="headingTwo">
      <h5 class="mb-0">
        <label class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <!-- 初始收起状态用向右箭头 -->
          <i class="fa fa-chevron-right"></i><label style="margin-left:20px;">第二个折叠面板标题</label>
        </label>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        第二个折叠面板的内容
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  // 监听折叠面板展开完成事件
  $('#accordion').on('shown.bs.collapse', function(e) {
    // 切换对应标题行的图标为向下箭头
    $(e.target).prev().find('.fa').removeClass('fa-chevron-right').addClass('fa-chevron-down');
  });

  // 监听折叠面板收起完成事件
  $('#accordion').on('hidden.bs.collapse', function(e) {
    // 切换对应标题行的图标为向右箭头
    $(e.target).prev().find('.fa').removeClass('fa-chevron-down').addClass('fa-chevron-right');
  });
});
</script>

关键说明 #

1. 修正初始图标状态：默认展开的面板（collapse show）对应的图标用fa-chevron-down，收起状态的面板用fa-chevron-right，确保初始状态和面板状态匹配。
2. 利用Bootstrap折叠事件：通过shown.bs.collapse（展开完成）和hidden.bs.collapse（收起完成）事件，精准触发图标切换，避免点击时的状态不同步问题。
3. 修复细节错误：你原来代码里的fa-pencil-alt和fa-trash-alt在Font Awesome 4.7版本中不存在，换成了该版本支持的fa-pencil和fa-trash；同时去掉了多余的闭合标签。

这样修改后，点击折叠面板标题时，图标就会随着面板的展开/收起自动切换了。

内容的提问来源于stack exchange，提问作者Tom D