добавление toggle span в twitter bootstrap collapse

Я использую Twitter Bootstrap на новом сайте, и мне нужно добавить плюс/минус к toggler. Раздел завернут в тег ee channel entries для циклического перебора карьерных объектов и создания списка аккордеонов. Мой аккордеонный код выглядит следующим образом: 

{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, который я запустил, даже если он действительно изменил текст, как мне хотелось бы, он не обязательно сделает это, когда я нажму на другой аккордеон toggler. Как лучше всего заставить это работать и сделать его достаточно гибким,чтобы работать с несколькими аккордеонистами?

UPDATE я внес некоторые изменения в javascript и использовал события, которые предлагает Twitter Bootstrap. Я также удалил атрибут data-parent, поэтому они действуют как складные переключатели, а не аккордеон. Новый код выглядит следующим образом: 

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

Это фактически изменяет текст, но он изменяет знак плюс / минус для каждого toggler не только toggler вы нажали. Я мог бы добавить пользовательский класс к каждому промежутку, но я не уверен, как бы я тогда нацелился на это в javascript без необходимости создавать шоу.скрыть функцию для каждого переключенного. Это кажется неэффективным, и должен быть более простой способ сделать это.

3 3
jquery twitter-bootstrap collapse accordion

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 здесь .

4

Простое решение работало для Bootstrap 3.

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

Следующее для аккордеона, где только одна панель будет открыта одновременно (для 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 пример скрипки

2. Javascript

Использование Javascript для проверки класса '.рухнул" по всем связям с классом".аккордеон-тумблер': 

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/

0