Bootstrap - 更改展开和折叠的折叠展开切换图标

Answer 1

注意：此解决方案适用于 Bootstrap v4.x，因为更高版本有一个带图标的 Accordion 组件。

如何切换图标状态

当 Bootstrap

data-toggle

用于打开和关闭 Collapse 组件 时，它会在按钮上设置

.collapsed

类。该类也可用于更改按钮图标的状态。

虽然可以在两个不同的图标之间切换，但在本例中不需要这样做。我们只需旋转单个插入符号图标即可向上或向下。我们可以使用 css 转换来做到这一点。通过添加过渡动画，我们可以使其看起来像 Bootstrap 的更高版本，即插入符号明显旋转 180 度。

提示： 将 .collapsed 类添加到 html 中的按钮，以确保按钮与 Collapse 同步启动。否则，第一次单击时图标不会更改状态。

演示片段

[data-toggle=collapse] :first-child {
  transition: transform 500ms linear;
}

[data-toggle=collapse].collapsed :first-child {
  transform: rotate(180deg);
}

<div class="content-wrapper">
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <section class="col-lg-5 connectedSortable">

          <div class="card bg-gradient-primary">
            <div class="card-header border-0">
              <div class="card-title h4">Bootstrap Collapse Component</div>
              <div class="card-tools">
              
                <!-- collapse button with Font-Awesome icon -->
                <button 
                type="button" 
                class="btn btn-outline-primary collapsed" 
                data-toggle="collapse" 
                data-target="#collapseMap">
                    <i class="fas fa-caret-up"></i>
                </button>
                  
                <!-- alternative button with html icon -->
                <button 
                type="button" 
                class="btn btn-outline-primary collapsed" 
                data-toggle="collapse" 
                data-target="#collapseMap">
                    <div>&Hat;</div>
                </button>  
                  
                  
              </div>
            </div>
            <div class="collapse" id="collapseMap">
              <div class="card-body">
              <figure id="world-map" class="figure">
                <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Simple_world_map.svg" class="figure-img img-fluid rounded" alt="...">
                <figcaption class="figure-caption">A caption for the above image.</figcaption>
            </figure>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </section>
</div>

<!-- Bootstrap 4.6 -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />