Jquery 引导可折叠显示

我使用引导手风琴菜单，我希望它有小+符号前面的文字时，折叠不是折叠和小-符号前面的文字时，折叠是折叠。我正在使用以下事件侦听器

$('.collapse').on('show', function(e){
        $('.collapsed-status').innerHTML('- ');
    });
    $('.collapse').on('hide', function(e){
        $('.collapsed-status').innerHTML('+ ');
    });

jQuery也包括在内，所以这些Selecotr不应该有问题。我的折叠鞋看起来像这样

<div class="accordion-group produkty">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#produkty" href="#collapse1"><span class="collapsed-status">+ </span>Test</a>
                        <ul id="collapse1" class="collapse">
                        <li>›› Test</li>
                        <li>›› Test</li>
                        <li>›› Test</li>
                        <li>›› Test</li>
                        </ul>
                </div>

››测试
››测试
››测试
››测试

---

但它不起作用。我试着把它修好，但没法使它工作。感谢forward提供的帮助

您可以使用以下代码切换元素的类：

$('.accordion').collapse();

$('.accordion').on('shown hidden', function(e){
    $(e.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-plus icon-minus');
});

在上面的代码中，我将在显示加号图标和减号图标之间切换，您可以在使用引导后使用加号图标和减号图标

您只需在每个标题前添加一个图标，如下所示：

<div class="accordion-heading">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
      <i class="icon-minus"></i> Heading 1
    </a>
</div>

结果如下：

---

这是jsFiddle，您可以看到一个实时演示：

您能创建一个fiddle吗看起来我的javascript有问题，因为我尝试过编写$（'.accordion'）.hide（）；在标签中插入jus来测试选择器的功能和javascript的工作，但它并没有隐藏手风琴。我还试图更改它并隐藏任何其他元素，但它也不起作用；