Bootstrap 展示时可折叠

Question

我正在使用 Bootstrap 手风琴菜单http://twitter.github.io/bootstrap/javascript.html#collapse，我希望它在可折叠不折叠时在文本前面有小号 + 符号，在折叠时在文本前面有小号 - 折叠。我正在使用以下事件监听器

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

jQuery 也包含在内，所以这些选择器应该没有问题。我的可折叠看起来像这样

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

但它不起作用。我试图修复它，但我无法让它工作。感谢您的帮助

Answer 1

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

$('.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，所以你可以看到现场演示：http://jsfiddle.net/s8dAd/4/