Bootstrap 3：手风琴雪佛龙图标向上或向下答案

【问题标题】：Bootstrap 3 : Accordion Chevron Icon pointing up or downBootstrap 3：手风琴雪佛龙图标向上或向下
【发布时间】：2014-04-04 12:46:46
【问题描述】：

对不起我的英语。首先，剧本有什么问题？雪佛龙没有变化。我不是网络管理员。我是初学者。非常感谢。

这是我的模板：

                <div class="panel-heading">
                    <div class="panel-title">Tableau de bord
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></a>
                    </div>
                </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <ul class="list-group">
                          <li class="list-group-item"><i class="fa fa-user"></i><a href="#">Information</a></li>
                          <li class="list-group-item"><i class="fa fa-power-off"></i><a href="#">Log out</a></li>
                        </ul><!--/.list-group-->
                    </div><!--/collapseOne-->

                <div class="panel-footer">
                    <div class="panel-title">Archives
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></a>
                    </div>
                </div>
                    <div id="collapseTwo" class="panel-collapse collapse in">
                        <ul class="list-group" style="margin-bottom:0">
                          <li class="list-group-item"><i class="fa fa-arrow-right"></i><a href="#">2015</a></li>
                          <li class="list-group-item"><i class="fa fa-arrow-right"></i><a href="#">2014</a></li>
                        </ul><!--/.list-group-->
                    </div><!--/collapseTwo-->             
            </div><!--/.panel-blue-->
        </div><!--/.panel-group accordion-->

这是脚本：

<script>
$('.clickable').on('click', function (e) {
  var $this = $(this);
  if (!$this.hasClass('panel-collapsed')) {
    $this.parents('.panel').find('.panel-title').slideUp();
    $this.addClass('panel-collapse');
    $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
  } else {
    $this.parents('.panel').find('.panel').slideDown();
    $this.removeClass('.panel-title');
    $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
  }
})
</script>

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

我将 addClass/removeClass 两行替换为一个 toggleClass，它做同样的事情，它似乎工作：http://jsfiddle.net/FLZpk/1/

$('.clickable').on('click', function (e) {
  var $this = $(this);
  if (!$this.hasClass('panel-collapsed')) {
    $this.parents('.panel').find('.panel-title').slideUp();
    $this.addClass('panel-collapse');
  } else {
    $this.parents('.panel').find('.panel').slideDown();
    $this.removeClass('.panel-title');
  }
  $this.find('i').toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
})

jQuery toggleClass 文档：https://api.jquery.com/toggleClass/

【讨论】：