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

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

作为一个例子，这里是我想要突出显示的按钮，但只有当它的数据目标（div id january）被打开时。如果数据目标（div id二月）已打开，一月按钮将不再突出显示，二月按钮将突出显示。如果没有打开任何数据目标，则不会突出显示任何按钮

    <!-- 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>

一月

数据目标

表示缺少的带有

id=“january”

的html元素

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

#一月

，动画完成后，类将被折叠

动画完成后，该按钮将折叠类

，

，您可以对其进行样式设置

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

编辑：按操作注释修改代码段

#卡1.卡头{
过渡：背景色0.5s；
}
#卡片1.倒塌{
背景色：红色！重要；
}
#卡片2.卡片头{
背景色：红色；
过渡：背景色0.5s；
}
#卡2.卡头.折叠{
背景色：rgba（0,0,0,0.03）
}

作为特色的
特殊头衔待遇
具有以下支持文本，作为附加内容的自然引入
作为特色的
特殊头衔待遇
具有以下支持文本，作为附加内容的自然引入

非常感谢您这么做。是的，我有一月份以后的部门id当我添加css时，按钮确实会改变颜色，但只有在detail div关闭时才会改变颜色。它打开时不会改变颜色。我希望只在目标打开时更改其背景色。这应该只是根据这些状态反转按钮样式的问题。我用第二个示例修改了代码片段