我已经看到这个问题问了几次，但我似乎找不到适合我的东西。我想在这个论坛或旧版本的引导程序的一些答案。
首先，我应该声明我还在学习js，而且不是很擅长，但我的情况是这样的。我有一个 accordion 风格的折叠，我试图改变类，当组分别打开或关闭时。这样我使用的图标将从打开切换到关闭图标。
以下是我的标记：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    <span class="accordion-up"></span>title
                </a>
            </h4>
        </div>

        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                content
            </div>
        </div>
    </div>
</div>

下面是CSS：

.accordion-up {
  background: url("images/accordion-up.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  padding: 5px 20px;
}

.accordion-down {
  background: url("images/accordion-down.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  padding: 5px 20px;
}

下面是我的js：

$(document).ready(function(){    
  $('#accordion').on('shown', function () {
    $(".accordion-down").removeClass("accordion-down").addClass("accordion-up");
  });

  $('#accordion').on('hidden', function () {
    $(".accordion-up").removeClass("accordion-up").addClass("accordion-down");
  });
});

如果有人能帮我弄清楚如何使这些变化切换，将不胜感激。
谢谢你！