Jquery 在折叠事件上切换图标

这个问题我已经看过好几次了，但我似乎找不到适合我的东西。我想在这个论坛上或者对于bootstrap的旧版本，会有一些答案

首先，我应该声明，我仍然在学习js，并不擅长，但我的情况是这样的。我有一个手风琴式的折叠，我试图在组分别打开或关闭时更改类。这样，我使用的图标将从打开图标切换到关闭图标

以下是我的标记：

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

以下是我的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");
  });
});

如果有人能帮我弄清楚如何进行这些更改，我将不胜感激

---

谢谢

您的回调语法对于引导3不正确

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

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

下面是一个更简单的版本，它将事件组合到单个函数中并切换类：

$(function() { // shorthand for document.ready
  $('#accordion').on('shown.bs.collapse hidden.bs.collapse', function () {
    $('.accordion-down, .accordion-up').toggleClass('accordion-down accordion-up');
  });
});

---

太棒了，谢谢@isherwood在这个问题上停留了一段时间！

$(function() { // shorthand for document.ready
  $('#accordion').on('shown.bs.collapse hidden.bs.collapse', function () {
    $('.accordion-down, .accordion-up').toggleClass('accordion-down accordion-up');
  });
});