将切换范围添加到twitter bootstrap崩溃-Java 学习之路

我在新网站上使用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，即使它确实改变了我想要的文本，当我点击另一个手风琴转换器时也不一定会这样做 . 什么是使其工作并使其足够灵活以适应多个手风琴转换器的最佳方式？

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

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

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

3 回答

您应该使用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 .

回复于 2024-05-02T11:30:21+08:00

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

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

回复于 2024-05-02T11:30:21+08:00

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

1. CSS - only

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

回复于 2024-05-02T11:30:21+08:00

将切换范围添加到twitter bootstrap崩溃

3 回答

相关问题