1

我正在使用 Bootstrap 手风琴菜单http://twitter.github.io/bootstrap/javascript.html#collapse并且我希望它在可折叠时在文本前面有一点 + 符号不是折叠并且在文本前面有一点点 - 当collapsible 是折叠的。我正在使用以下事件侦听器

$('.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>

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

4

1 回答 1

2

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

$('.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/

于 2013-06-09T17:01:22.740 回答