Bootstrap 4折叠元素打开时更改按钮的背景颜色

Question

是否可以更改打开折叠卡片的按钮的背景颜色？我的目标是突出显示对应于活动数据目标的按钮。

例如，这是我要突出显示的按钮，但前提是它的数据目标（div id january）已打开。如果打开数据目标（div id february），则 1 月按钮不再突出显示，而 2 月按钮将突出显示。如果没有打开数据目标，则不会突出显示任何按钮。

    <!-- January -->

        <div class="card col-sm-2">
            <button class="btn btn-link btn-block" type="button" data-toggle="collapse" 
             data-target="#january" aria-expanded="true" aria-controls="january">
                <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                  January
            </button>
        </div>

Answer 1

data-target 表示缺少id="january" 的html 元素。

但假设你在其他地方有它，当你点击按钮时会发生 2 件事。

1. #january，动画完成后，会有collapse这个类
2. 动画完成后，按钮将具有您可以设置样式的 collapsed 类

这里我使用卡片标题作为折叠“按钮”并通过 css 设置样式

编辑：根据 OP 评论修改 sn-p

#card1 .card-header {
  transition: background-color 0.5s ease;
}

#card1 .collapsed {
  background-color: red !important;
}

#card2 .card-header {
  background-color: red;
  transition: background-color 0.5s ease;
}

#card2 .card-header.collapsed {
  background-color: rgba(0, 0, 0, 0.03)
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>


<div id="card1" class="card">
  <div class="card-header" data-toggle="collapse" data-target="#january">
    Featured
  </div>
  <div id="january" class="card-body collapse show">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div id="card2" class="card">
  <div class="card-header" data-toggle="collapse" data-target="#february">
    Featured
  </div>
  <div id="february" class="card-body collapse show">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>