【发布时间】：2023-02-25 03:10:07
【问题描述】：
我想突出显示用户打开的面板。当用户单击卡片标题中的按钮时，背景设置为红色。如 sn-p 所示，这可以毫不费力地工作。
在某些情况下，我会有一个面板，通常是第一个，在页面加载时打开，我用 show 类设置它。我的目标是在页面加载时将此卡片标题的背景设置为红色。
卡片头中的按钮使用js设置，如代码sn-p所示。
我想我必须使用 javascript 来切换类。
首先我添加了一个新类 highlight 并添加了以下 CSS 代码：
.accordion .card-header.highlight {
color: #fff;
background-color: red;
}
然后我添加了以下 js（请注意，我发现 js 很难理解，虽然速度很慢但我肯定在学习）以尝试在页面加载时设置打开窗格标题的背景。
$(document).ready(function(){
// Add class highlight to panel with show class
$(".collapse.show").each(function(){
$(this).prev(".card-header").addClass("highlight");
});
// toggle highlight class
$(".card-header .btn").click(function(){
$(".card-header").toggleClass("highlight");
});
});
我看起来很乱，可能是因为它确实很乱，并且没有产生预期的结果。
如何在页面加载时设置打开面板标题的背景（红色）以及如何使用 js 切换类？
/** Accordions JavaScript **/
/** Dynamically add id **/
$.each($(".accordion"), (function (index) {
$(this).attr("id", "accordion_" + parseInt(index + 1));
}));
/** Dynamically add interaction **/
$.each($(".accordion > .card"), (function (index, value) {
var num = index + 1;
$(value).children(".card-header").attr("id", "heading_acc_" + num);
$(value).find(".card-header > .card-title").wrapInner("<button class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" aria-expanded=\"false\"></button>");
$(value).find(".card-header > .card-title > button").attr({
"data-target": "#collapse_acc_" + num,
"aria-controls": "collapse_acc_" + num
});
$(value).children(".collapse").attr({
id: "collapse_acc_" + num,
"aria-labelledby": "heading_acc_" + num
});
}));
$(document).ready(function(){
// Add class highlight to panel with show class
$(".collapse.show").each(function(){
$(this).prev(".card-header").addClass("highlight");
});
// toggle highlight class
$(".card-header .btn").click(function(){
$(".card-header").toggleClass("highlight");
});
});/* ========= Accordions ==========*/
.accordion .card .card-header {
border-bottom: 1px solid grey
}
/* Accordion Standard */
.accordion:first-child {
margin-top: 5px;
border-radius: 0
}
.accordion h1,
.accordion h2,
.accordion h3,
.accordion h4,
.accordion h5,
.accordion h6 {
font-size: 1.125rem
}
.accordion .card {
border: 0;
border-radius: 0;
padding-top: 0;
padding-bottom: 0
}
.accordion .card .card-title {
margin-bottom: 0;
margin-top: 0;
padding-top: 0;
padding-bottom: 0
}
.accordion .card .card-title button {
color: black
font-weight: bold;
font-size: 1.25rem;
padding: 1.25rem;
border: 1px solid grey
border-radius: 0;
background-color: #FFF;
padding-left: 70px
}
.accordion .card .card-title button:hover,
.accordion .card .card-title button:focus {
color: #174EA6
}
.accordion .card .card-title button::after {
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
top: 1.5rem;
left: 2rem
}
/* Open and Close Icon */
.accordion .card .card-title button[aria-expanded="true"]:after {
content: "\f077";
transform: rotate(0deg);
transition: .3s all;
color: black
}
.accordion .card .card-title button[aria-expanded="false"]:after {
content: "\f054";
transform: rotate(90deg);
transition: .3s all;
color: black
}
.accordion .card .card-header {
padding: 0
}
.accordion .card .card-header button {
border: 1px solid grey
background-color: #fff;
width: 100%;
text-align: left
}
.accordion .card-body {
border: 1px solid grey;
background-color: white
}
/* Active Accordion Panel - Background and Text Color */
.accordion .card .card-header button[aria-expanded="true"] {
background-color: red;
color: #ffffff
}
.accordion .card-header.highlight {
color: #fff;
background-color: red;
}<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
<link href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />
<h2>Accordion: Group of 2 - First panel open</h2>
<!-- Accordion headings should be changed to respect page hierarchy -->
<!--start accordion-->
<div class="accordion mdb-shadow-4 my-5">
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 1 of 2
</h2>
</div>
<div class="collapse show">
<div class="card-body">
<p>Loren ipsum
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 2 of 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 2 of 2 content here.</p>
</div>
</div>
</div>
</div>
<!--end accordion-->【问题讨论】：
-
听起来你打算突出显示全部打开面板。为什么不直接使用 CSS？
-
@isherwood 事实上，所有打开面板的卡片标题都有彩色背景。这很好用。但我也希望在页面加载时打开的面板的卡片标题具有彩色背景。我可以仅使用 CSS 完成此操作吗？
-
无论如何，他们不都有
show类吗？ -
@isherwood 不，只有我想在页面加载时打开的面板。
-
请注意，您正在学习的 Bootstrap 版本在 2 个月前达到其官方 end-of-life 日期。
标签： javascript jquery css twitter-bootstrap bootstrap-accordion