Question

我使用Bootstrap手风琴使用下面的代码显示/隐藏内容。 javascript代码将活动类应用于面板标题，将背景颜色更改为绿色，带有白色字体。这工作正常但我需要.question span类来在单击面板标题时更改字体颜色。我已经尝试将.question类定位为添加活动类，但它没有影响吗？

HTML

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<span class="question">Q:</span>First Question</a></h4></div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<span class="answer">A:</span> Text </div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<span class="question">Q:</span>Second Question</a></h4></div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<span class="answer">A:</span> Text</div>
</div>
</div>

JS

 $('.panel-heading').click(function() {
$('.panel-heading').removeClass('active');
$(this).addClass('active');

$('.question').removeClass('active');
$(this).addClass('active');

});

CSS

.active {
background-color: green!important;
color: white!important;
}

.question {
color: blue
}

Answer 1

您可以使用纯CSS实现这一点，只需使用bootstrap set attribute aria-expanded：

.panel-heading a[aria-expanded='true']>span.question {
    color: red;
}

.panel-heading a[aria-expanded='false']>span.question {
    color: blue;
}

Bootstrap Acccordion上的活动状态单击

1 个答案: