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。