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/