javascript - 修复 twitter bootstrap 折叠图标，glyphicons

Question

我更改了 twitter bootstrap 的行为，因此整个面板标题会触发 Accordion 。这导致“向上”图标不再在“向下”图标中发生变化。

我正在尝试解决这个问题，但无济于事。如何恢复这些图标的正确行为？

<script>
        $(document).ready(function() {
            $('.accordion-toggle').on('click', function(e) {
                e.preventDefault();
                if (!$('.panel-collapse').hasClass('.collapsed')) {
                    console.log('toggle collapsed class')
                    $('.indicator').removeClass('.glyphicon-chevron-up');
                    $('.indicator').addClass('.glyphicon-chevron-down');
                }
            });
        });
</script>

这是我的一个 Accordion 面板的结构:

<div class="panel panel-default">
            <a href="#collapseOne" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">  
                <div class="panel-heading">
                    <i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
                    <h4 class="panel-title">
                        Title
                    </h4>
                </div>
            </a>
            <div id="collapseOne" class="panel-collapse in">
                <div class="panel-body">
                    <center>
                        <p>Some body..</p>
                    </center>
                    <form class="form-search">
                        <h2 class="form-search-heading">Some heading..</h2>
                        <input type="text" class="input-block-level" placeholder="Zoekterm" id="search-box">
                        <div id="resultaten"></div>
                    </form>
                </div>
            </div>
        </div>

PS: 我使用的是 Bootstrap 3.0.1

Answer 1

不要在 addClass 和 removeClass 方法中使用句点:

$('.indicator').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');