Bootstrap Acccordion上的活动状态点击

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，只要使用引导集属性aria-expanded：

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

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