onClick 与 foreach css 更改 jquery

Question

我在 php 中有一个带有引导折叠面板的 foreach 循环，我想知道是否有任何选项可以在单击单个标题时更改 div.panel-heading 的颜色。

所以当我点击<a href="..."></a> 的第一个标题时，只有第一个div.panel-heading 变成红色背景。

@foreach($aa as $msg)

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Sender: <a href="/member-list/{{{$msg->username}}}">{{{$msg->username}}}</a>  
{{{ " title:  ". "  "}}}

<a data-toggle="collapse" data-parent="#accordion" href="#collapse{{{$msg->msg_id}}} ">
{{{$msg->title}}}
</a>

</h4>
</div>

<div id="collapse{{{$msg->msg_id}}}" class="panel-collapse collapse">
<div class="panel-body">
{{{$msg->msg}}}
</div>

</div>
</div>
@endforeach  

Answer 1

使用 jquery 做这样的事情：

    $('div.panel-heading a').click(function(){

    $('div.panel-heading').css('background','transparent');        

    var ParentDiv = $(this).parent();

    ParentDiv.css('background','red');

});

Answer 2

看看这个（使用 jquery lib ） JSfiddle

 $('div.panel-heading').click(function(){
 $('div.panel-heading').removeClass('bgcolor');
$(this).addClass('bgcolor');
 });