Question

我是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 -->

感谢您的帮助！

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

Bootstrap 3 - 根据手风琴折叠状态更改Panel-Title中的Glyphicon

1 个答案: