2

我对 Bootstrap 很陌生，并且正在构建一个可以容纳很多过滤器的手风琴。用户将能够打开和关闭过滤器，我想将 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 -->

谢谢你的帮助！

4

1 回答 1

3

在 Bootstrap 的 javascript on document ready 之后添加如下所示的代码：

$('#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');
});

另请参阅：引导折叠：更改切换按钮图标和文本的显示

于 2013-10-12T19:30:43.920 回答