3

我在一个新站点上使用 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 函数。这似乎效率低下，必须有一种更简单的方法来做到这一点。

4

3 回答 3

4

您应该使用 Bootstrapshow和hide类似的事件，而不是click上面的函数：

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

JS 小提琴在这里。

于 2013-01-11T16:09:12.707 回答
1

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

$('[data-toggle="collapse"]').click(function(e) {
    $(e.target).find('.icon-minus-sign, .icon-plus-sign').toggleClass("icon-minus-sign icon-plus-sign");
});
于 2013-10-22T18:49:27.150 回答
0

以下是一次只能打开一个面板的手风琴（对于 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 */
}

折叠的类需要从一开始的 JS小提琴示例中设置在HTML中

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/

于 2014-04-02T08:30:29.147 回答