我正在使用Bootstrap可折叠面板,我试图在面板扩展时切换面板 Headers 中的glyphicon图标类 . 它可以工作,但它也会改变所有其他未扩展的 Headers . 我已经尝试添加一个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>