对于您的问题，我有一个 CSS 解决方案。而且我注意到您的代码中有几个问题。
1) 几个问题
您当前的代码创建了一组具有相同id="accordion2" 的手风琴。这是不对的。 id 必须是唯一的。
每个手风琴只包含一个面板。这很奇怪。已经发明了手风琴来管理多个面板。
您已经替换了 Bootstrap 类。例如，您的代码使用.accordion-group 和.accordion-heading 而不是.panel-group 和.panel-heading。我需要查看您的代码以了解它们之间的区别。
2) 如何使用 CSS 切换图标
让我们从标准的Accordion example 开始。
您可以将FontAwesome图标添加为the :after pseudo-element的内容：
.panel-title > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: 'FontAwesome';
}
Bootstrap 使用the aria-expanded attribute 作为控制元素。
插件将根据可折叠元素是否已打开或关闭自动切换此属性。
所以你可以通过 CSS 切换图标：
.panel-title > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}
请查看演示。是你想要达到的吗？
https://jsfiddle.net/glebkema/1wx4ubvc/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
.panel-title > a {
display: block;
position: relative;
}
.panel-title > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: 'FontAwesome';
position: absolute;
right: 0;
}
.panel-title > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
Item 1
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1">
<div class="panel-body">
Text 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
Item 2
</a>
</h4>
</div>
<div id="collapse-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-2">
<div class="panel-body">
Text 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
Item 3
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-3">
<div class="panel-body">
Text 3
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
3) 试试这个代码
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
foreach (var i in footerPage.StaticPagePersons)
{
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-@i.Id">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-@i.Id" aria-expanded="false" aria-controls="collapse-@i.Id">
@Html.Raw(@i.Type)
</a>
</h4>
</div>
<div id="collapse-@i.Id" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-@i.Id">
<div class="panel-body">
<img ng-src="@i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
<h1>@Html.Raw(@i.Name)</h1>
<h3>@Html.Raw(@i.Title)</h3>
<br />
@Html.Raw(@i.BioDetail)
</div>
</div>
</div>
}
</div>
并使用这个 CSS：
.panel-title > a {
display: block;
position: relative;
}
.panel-title > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: 'FontAwesome';
position: absolute;
right: 0;
}
.panel-title > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}