如何仅设置活动或扩展的 Bootstrap 手风琴卡的样式？

Question

我正在使用 bootstrap 4 手风琴，我只想.card为show collapse.var active = document.querySelector(".collapse.show");active.parentNode.style.border = "1px solid #ea8523";现在我.card只想要橙色边框，它是活动的或扩展的，其他的将有虚线边框。我知道使用 JavaScript 是可能的，但我是 JavaScript 的新手，所以请帮助我。

Answer 1

当展示类有它时，每张卡片将被添加到边框。然后我们用 javascript 选择每张卡片并添加点击事件。

CSS：

.card.show {

  border: 1px solid orange !important;

}

杰斯：

let cards = [...document.querySelectorAll(".card")];

cards.forEach(card => {

  card.addEventListener("click", function() {

    cards.forEach(c => c.classList.remove("show"));

    this.classList.add("show")

  })

});