Twitter bootstrap 自举可折叠面板-can'；字形图标

我正在使用引导可折叠面板，并尝试在面板展开时切换面板标题中的glyphicon图标类。它可以工作，但也会更改所有其他未展开的标题。我尝试添加if/else来检查aria expanded=true是否正确，但这也不起作用。谢谢你的帮助

JS
        $('a.panel-toggle').on('click', function () {
             if ($('.panel-toggle').attr('aria-expanded') === "true") {
            $('.glyphicon').toggleClass("flip");
            }
        });

CSS
        .glyphicon   {
        font-size: 16px;
        color: #720808;

        }
.glyphicon.glyphicon-play.flip {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

HTML
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"> 

          <a data-toggle="collapse"  data-parent="#panel" href="#collapse1" class="panel-toggle">Group 1<span class="glyphicon glyphicon-play" id="icontoggle"></span></a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <ul class="list-group">
          <li class="list-group-item">Sub-group 1</li>
          <li class="list-group-item">Sub=group 2</li>
        </ul>
      </div>
    </div>

JS
$（'a.panel-toggle'）。打开（'click'，函数（）{
if（$（'.panel toggle'）.attr（'aria-expanded'）=“true”）{
$（'.glyphicon'）.toggleClass（“翻转”）；
}
});
CSS
.字形图标{
字体大小：16px；
颜色：#720808；
}
.glyphicon.glyphicon-play.flip{
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=1）；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-ms变换：旋转（90度）；
-o变换：旋转（90度）；
变换：旋转（90度）；
}
HTML

子组1
子=组2

无需使用JS，这完全可以通过CSS处理

折叠的

类来实现。这里有一个代码笔供您查看，谢谢-感谢。无需使用JS，这可以通过CSS处理

折叠的
类来完成。这里有一个代码笔供你复习，谢谢-谢谢。