【问题标题】：Change background colour of panel heading when toggled in Bootstrap collapsible panel group在 Bootstrap 可折叠面板组中切换时更改面板标题的背景颜色
【发布时间】：2020-07-23 01:24:33
【问题描述】：

我正在尝试使用 Bootstrap 创建一个可折叠的面板组，并且我希望在面板组未折叠时更改面板标题的背景颜色（一种颜色用于折叠面板组，一种用于展开）。我曾尝试使用 :active 选择器，但这仅在单击时更改颜色，它不会持续更长时间：

 <div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <a data-toggle="collapse" class="panel-title" href="#collapse1">Title</a>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
      </ul> 
    </div>
  </div>
</div>

.panel-heading a:active {
  background: red;
}

https://jsfiddle.net/s625dgty/

如果有任何建议，我将不胜感激。

【问题讨论】：

标签： html css bootstrap-4 collapsable

【解决方案1】：

使用.active 类而不是:active 伪类，只要用户按住鼠标按钮（或指点设备等效项），它就会持续存在。改为定位链接的父级.panel-header：

$('.panel-heading').on('click', function(e) {
  $(this).toggleClass('active');
});

CSS 已修改为通过加倍类以更高的特异性覆盖 .panel-heading：

.panel-heading.panel-heading {...

某些 Bootstrap 类不能被级联优先级覆盖，只需将目标类加倍，如上所示 -- 不要使用!important

另外，将<link> 放在<head> 中。将 <script> 放在结束 </body> 标记之前。见演示。

演示

.panel-heading.panel-heading.active {
  background: red;
}

.panel-title {
  display: inline-block;
  width: 100%;
}

.panel-heading.panel-heading.active .panel-title {
  color: white;
  font-weight: 900;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <a data-toggle="collapse" class="panel-title" href="#collapse1">Title</a>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <ul class="list-group">
          <li class="list-group-item">item 1</li>
          <li class="list-group-item">item 2</li>
        </ul>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script>
    $('.panel-heading').on('click', function(e) {
      $(this).toggleClass('active');
    });
  </script>
</body>

</html>

【讨论】：

【解决方案2】：

当用户点击面板时，您可以添加一个类。然后样式到新的类。让我们试试这个。

CSS

.panel.active {background: red}

JS

$('.panel').on('click', function(){
    $(this).toggleClass('active')    
})

【讨论】：