Щелкать значок аккордеона Bootstrap не меняется

У меня есть эта аккордеонная вещь из бутстрапа. Значки стрелок указывают вниз.

Затем я нажимаю на Competency1, я получаю (значок Competency1 вверх, значок Competency2 вниз):

Но, если я сейчас нажимаю на Competency2, я получаю (значок Competency1 еще, значок Competency2 вверх):

Является ли это ошибкой в bootstrap, или это можно легко устранить?

Спасибо.

Ответ 1

Трудно предложить предложения, не видя свой код. Возможно, вы запускаете обмен изображения только в событии "show" (проверьте наличие опечаток в js).

Вот что я использую для создания такого же эффекта на моих сайтах:

HTML:

<div class="accordion">
    <div class="accordion-group">
        <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                <i class="icon-chevron-down"></i>
                Collapsible Group Item #1
            </a>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                <i class="icon-chevron-down"></i>
                Collapsible Group Item #2
            </a>
        </div>
    </div>
</div>

JavaScript:

$('.accordion').on('show hide', function (n) {
    $(n.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-up icon-chevron-down');
});

Ответ 2

Похоже, что это происходит потому, что нажатие на Competency2 сворачивает компетенцию1, когда компетенция1 уже открыта. Поскольку в компетенции 1 нет события щелчка, когда он обрушивается таким образом, каретка все еще указывает вверх.

Ответ 3

Это ошибка в бутстрапе. Если вы проверяете свою разметку, когда вы переключаете один из заголовков, у которых есть класс .accordion-toggle, он переключает его с того, что класс рухнул или нет. Когда вы нажимаете другой заголовок на тот, который открыт, хотя он не добавляет класс свернутого в заголовок открытого элемента. Это исправило это для меня:

$('.accordion-toggle').click(function() {
    if($(this).hasClass('collapsed')) {
        $('.accordion-toggle').not(this).addClass('collapsed');
    }
});

Ответ 4

Вы можете использовать этот код для изменения значков.

Script часть:

jQuery('document').ready(function() {

$('.accordion').on('show hide', function (n) {
    var targetEle = $(n.target).siblings('.accordion-heading').find('.accordion-toggle');
    if($(n.target).hasClass("in")){
        targetEle.children(".icon-chevron-down").show();
        targetEle.children(".icon-chevron-up").hide();
    }
    else{
        targetEle.children(".icon-chevron-down").hide();
        targetEle.children(".icon-chevron-up").show();
    }

});

});

Примечание. Для использования этого кода в части html вам необходимо включить оба тега изображения, т.е. chevron-up и chevron-down.

Ответ 5

Используя jquery.js 1.10.2 и bootstrap-collapse.js v2.3.0, это пересмотр вышеизложенного. При загрузке документа он сбрасывает все элементы, кроме первого, а затем обрабатывает события susequent show/hide.

$(document).ready(function () {

    $(".accordion-body").on("shown", function (evt) {
        setIcon(evt.target, true);
    });

    $(".accordion-body").on("hidden", function (evt) {
        setIcon(evt.target, false);
    });

    $(".accordion-body").collapse("hide");
    $("#collapse-faq-1").collapse("show");
});

function setIcon(acdBody, isShown) {
    var indicator = "indicator" + acdBody.id.substr(acdBody.id.lastIndexOf("-"));

    if (!isShown) {
        $("#" + indicator).removeClass("icon-chevron-up").addClass("icon-chevron-down");
    } else {
        $("#" + indicator).removeClass("icon-chevron-down").addClass("icon-chevron-up");
    }
}

HTML:

<div class="accordion" id="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1">
                <i id="indicator-1" class="icon-chevron-down"></i>&nbsp;&nbsp;
                FAQ Item 1
            </a>
        </div>
        <div id="collapse-faq-1" class="accordion-body collapse in">
            <div class="accordion-inner">
                Answer 1 ...
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2">
                <i id="indicator-2" class="icon-chevron-down"></i>&nbsp;&nbsp;
                FAQ Item 2
            </a>
        </div>
        <div id="collapse-faq-2" class="accordion-body collapse in">
            <div class="accordion-inner">
                Answer 2 ...
            </div>
        </div>
    </div>
</div>