twitter-bootstrap-3 - Bootstrap 3 - 根据 Accordion 折叠状态更改面板标题中的 Glyphicon

Question

我对 Bootstrap 还很陌生，正在构建一个可以容纳很多过滤器的 Accordion 。用户将能够打开和关闭过滤器，我想将 glyphion 添加到面板标题，在视觉上加强面板的状态。

感觉这应该是在 Bootstrap 中做的一件非常基本的事情(我真的很想尽可能使用 Bootstrap 功能的原版)，但我在 GetBootstrap.com 文档中找不到任何解决这个问题的内容。

这是我的标记的片段。我已经删除了我尝试过的所有无效的东西。

    <div class="col-md-3">
        <h5>narrow by:</h5>

        <div class="panel-group" id="accordion">

            <!-- CATEGORY
            ================================================== -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" href="#collapseCategory">
                            <i class="glyphicon glyphicon-collapse-down"></i> category
                        </a>
                    </h4>
                </div> <!-- panel-heading -->

                <div id="collapseCategory" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <p>[workflow]</p>
                    </div> <!-- panel-body -->
                </div> <!-- panel-collapse -->
            </div> <!-- panel -->

        </div> <!-- panel-group -->

    </div> <!-- col -->


    <div class="col-md-9">
        <h5>search results</h5>
    </div> <!-- col -->

</div> <!-- row -->

感谢您的帮助!

Answer 1

在文档准备好 Bootstrap 的 javascript 之后添加如下所示的代码:

$('#collapseCategory').on('show.bs.collapse', function(){
$('a.accordion-toggle > i').removeClass('glyphicon-collapse-up').addClass('glyphicon-collapse-down');
});  
$('#collapseCategory').on('hide.bs.collapse', function(){
$('a.accordion-toggle > i').removeClass('glyphicon-collapse-down').addClass('glyphicon-collapse-up');
});     

另见: bootstrap collapse: change display of toggle button icons and text