Bootstrap可折叠面板 - 无法切换.glyphicon

Question

我正在使用Bootstrap可折叠面板，当面板展开时，我正试图切换面板标题中的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>