Bootstrap 4设置打开面板标题的颜色

Question

我正在使用基于 Bootstrap 4.3.1 的 HTML 模板。 在 Stack Overflow 社区的帮助下，我设法更改了这些模板中手风琴的默认行为。 现在一次只能打开一个面板（即一旦打开一个新面板，之前打开的面板就会自动关闭）。 我还设法通过调用 aria 属性来更改活动面板的背景颜色，如下所示：

.accordion .card .card-header button[aria-expanded="true"] {
  background-color:#0965AC;
  color: #ffffff;
}

可以在此 CodePen上找到一个工作示例（上述代码可以在 CSS 的底部找到：

当我使用class="collapse show"打开页面加载时的特定面板时，打开面板的卡片标题不显示蓝色背景。 再次关闭并打开此面板后，会显示蓝色背景。

关于如何在页面加载时让打开的面板也显示蓝色背景的任何建议？

我尝试如下，但无济于事：

.accordion .card .card-header button[class="collapse show"] {
  background-color:#0965AC;
  color: #ffffff;
}

Answer 1

根据您的 CSS 您可以将 JavaScript 中的aria-expanded="false"更改为aria-expanded="true" ，具体取决于您要扩展的元素。 将$(value).find(...)替换为以下内容以扩展加载的第一个元素：

if (num == 1) {
     $(value).find(".card-header > .card-title").wrapInner( "<button  class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" aria-expanded=\"true\"></button>");
} else {
     $(value).find(".card-header > .card-title").wrapInner( "<button  class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" aria-expanded=\"false\"></button>");
}

.accordion.card.card-header button[class="collapse show"]不起作用有两个原因。 首先，您将编写.accordion.card.card-header button.collapse.show定义button元素应该具有类collapse和show ，以便按钮获得定义到此选择器的 CSS 规则。 但是，单击该按钮时不会获得这些类。 您需要切换按钮上的show class 才能看到 CSS。