将切换跨度添加到 twitter bootstrap 崩溃答案

【问题标题】：adding toggle span to twitter bootstrap collapse将切换跨度添加到 twitter bootstrap 崩溃
【发布时间】：2012-12-26 04:21:22
【问题描述】：

我在一个新网站上使用 Twitter Bootstrap，我需要在切换器中添加一个加号/减号。该部分包含在 EE 频道条目标签中，以循环遍历整个职业生涯并创建手风琴列表。我的手风琴代码如下：

{if count == "1"}
<div class="accordion" id="my_accordion">
{/if}
    <div class="accordion-group">
        <div class="accordion-heading">
            <h2><a class="accordion-toggle" data-parent="#my_accordion" data-toggle="collapse" href="#collapse{count}">{title} <span class="pull-right">+</span></a></h2>
        </div>
        <div class="accordion-body collapse" id="collapse{count}">
            <div class="accordion-inner">
                {careers-summary}
                <p><a href="{page_uri}" class="btn btn-small">Learn More</a></p>
            </div>
        </div>
    </div>
{if count == total_results}
</div>
{/if}

我开始编写但似乎不想工作的javascript如下（见下面的新代码）：

我要做的就是在手风琴打开/关闭时将加号更改为减号，反之亦然。我越看我开始的 javascript，即使它确实按照我的意愿更改了文本，但当我单击另一个手风琴切换器时，它不一定会这样做。让它工作并让它足够灵活以在多个手风琴切换器上工作的最佳方法是什么？

更新我对 javascript 进行了一些更改，并使用了 Twitter Bootstrap 提供的事件。我还删除了 data-parent 属性，因此它们就像可折叠的切换器，而不是手风琴。新代码如下：

$('.accordion').on('hide', function () {
    $('.accordion-toggle span').html('+');     
})
$('.accordion').on('show', function () {
    $('.accordion-toggle span').html('-');     
})

这实际上会更改文本，但它会更改每个切换器的加号/减号，而不仅仅是您单击的切换器。我可以为每个跨度添加一个自定义类，但我不确定如何在 javascript 中定位它，而不必为每个切换创建一个 show.hide 函数。这似乎效率低下，必须有更简单的方法来做到这一点。

【问题讨论】：

该行不应该是if ($(this).children("span").text() == '+') {（好像缺少'if ('...)？
@JeromyFrench 是的，它应该是（并且在我在这里发布后在文件中进行了编辑）。我已经更新了上面的问题。

标签： jquery twitter-bootstrap accordion collapse

【解决方案1】：

您应该像这样使用 Bootstrap show 和 hide 事件，而不是上面的 click 函数：

$(".accordion-body").on("show",function(event){
        $('span', $(this).prev()).text('-');
});
$(".accordion-body").on("hide",function(event){
        $('span', $(this).prev()).text('+');
});

JS Fiddle here.

【讨论】：

是的，我开始这样做了，但我仍然无法确保切换器文本正确更改。我关闭了手风琴选项，因此您必须单击切换器来打开/关闭它，并希望简化所需的 javascript，但让它与手风琴行为一起工作仍然很好。
我错过了对手风琴体的更改。修复了 JS，一切都按预期工作。谢谢。

【解决方案2】：

简单的解决方案适用于 Bootstrap 3。

$('[data-toggle="collapse"]').click(function(e) {
    $(e.target).find('.icon-minus-sign, .icon-plus-sign').toggleClass("icon-minus-sign icon-plus-sign");
});

【讨论】：

【解决方案3】：

以下是一次只能打开一个面板的手风琴（对于 Bootstrap 3）

1. CSS - 仅限

#accordion2 .accordion-toggle span.glyphicon.glyphicon-collapse-up:before { 
content:"\e160" /* an up type icon */
}

#accordion2 .accordion-toggle.collapsed span.glyphicon.glyphicon-collapse-up:before { 
content:"\e159" /* a down type icon */
}

折叠的类需要从一开始就在 HTML 中设置 JS fiddle example

2。 Javascript

使用 Javascript 检查所有带有“.accordion-toggle”类的链接上的“.collapsed”类：

jQuery(document).ready(function ($) {
    $(document).on('click', '.accordion-toggle', function () {
        $(".accordion-toggle").each(function () {
            var iconSpan = $(this).find('.glyphicon');
            if ($(this).hasClass('collapsed')) {
                $(iconSpan).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
            } else {
                $(iconSpan).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
            }
        });
    });
});

小提琴：http://jsfiddle.net/JungleEditor/bCk3f/

【讨论】：