【发布时间】：2019-12-06 03:54:07
【问题描述】：
我只想自定义引导程序 4 崩溃，我几乎成功了，但是 jquery 存在问题。我希望每当有人点击任何卡片的标题时，它的背景颜色应该是黑色的，带有白色文本，但在我的情况下，它不起作用，而不是所有卡片标题的背景颜色都在变化。以下是代码示例：
function toggleIcon(e) {
$(e.target)
.prev('.card-heading')
.find(".more-less")
.toggleClass('fa-plus fa-minus');
$(".card-heading").toggleClass('bg-dark');
$(".card-heading").toggleClass('text-light');
}
$('.card-groups').on('hidden.bs.collapse', toggleIcon);
$('.card-groups').on('shown.bs.collapse', toggleIcon); .card-groups .card {
border-radius: 0;
box-shadow: none;
border-color: #EEEEEE;
margin-bottom: 5px;
}
.card-groups .card-default {
border-color: #ddd;
}
.card-groups .card-default > .card-heading {
padding: 0;
border-radius: 0;
color: #212121;
background-color: #FAFAFA;
border-color: #EEEEEE;
}
.card-groups .card-title {
font-size: 14px;
}
.card-groups h4.card-title {
margin-bottom: 0;
}
.card-groups .card-title > a {
color: #454545;
display: block;
padding: 15px;
text-decoration: none;
}
.card-groups .more-less {
float: right;
color: #454545;
font-size:20px;
}
.card-groups .card-default > .card-heading + .panel-collapse > .card-body {
border-top-color: #EEEEEE;
}
/* ----- v CAN BE DELETED v ----- */
body {
background-color: #26a69a;
}
.demo {
padding-top: 60px;
padding-bottom: 60px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container demo">
<div class="card-groups" id="accordion" role="tablist" aria-multiselectable="true">
<div class="card card-default">
<div class="card-heading" role="tab" id="headingOne">
<h4 class="card-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="more-less fa fa-plus"></i>
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card card-default">
<div class="card-heading" role="tab" id="headingTwo">
<h4 class="card-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="more-less fa fa-plus"></i>
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card card-default">
<div class="card-heading" role="tab" id="headingThree">
<h4 class="card-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="more-less fa fa-plus"></i>
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div><!-- panel-group -->
</div><!-- container -->请帮我解决。
【问题讨论】：
标签： javascript jquery html css bootstrap-4