Свернуть Bootstrap 3 может иметь несколько открытых панелей после программного открытия панели

Question

У меня проблема со сбоем начальной загрузки 3, после программного открытия панели можно оставить другую панель открытой, открывая первую панель.

Мой HTML:

<button type="button" class="btn showpanel">Show panel 3</button>
<button type="button" class="btn hidepanel">Hide panel 3</button>
<button type="button" class="btn openpanel">Open panel 3</button>
<button type="button" class="btn closepanel">Close panel 3</button>
<hr/>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
            </h4>
        </div>
        <div id="panel1" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
    </div>
</div>

И немного JavaScript:

$(".hidepanel").on("click", function() {
    $("#panel3").parent().hide();
});
$(".showpanel").on("click", function() {
    $("#panel3").parent().show();
});
$(".openpanel").on("click", function() {
    $("#panel3").collapse('show');
});
$(".closepanel").on("click", function() {
    $("#panel3").collapse('hide');
});

Мой jsfiddle, который демонстрирует эту проблему

Воспроизвести:

1. Нажмите кнопку "Открыть панель 3".
2. Нажмите "Панель 2", чтобы открыть ее. Пока проблем нет.
3. Нажмите "Панель 3", чтобы открыть ее снова. Панель 2 остается открытой!

Таким образом, открытие панели программным путем, похоже, портит внутреннюю регистрацию состояний панели? Я не вижу ничего явно неправильного в "изменении состояния" третьей панели (его класс меняется с "коллапса" на "в" и обратно, как и следовало ожидать).

Answer 1

Вы можете создать обработчик для коллапса show событие, которое происходит непосредственно перед отображением любых панелей.

Добавьте это, чтобы все остальные открытые панели были закрыты до того, как будет показана выбранная панель:

$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

Bootply demo

Вы можете прочитать больше о collapse События здесь: http://getbootstrap.com/javascript/

Answer 2

Я думаю, что проблема связана с тем, как вы меняете открытую панель. Вместо того, чтобы использовать функцию 'show', вам нужно запустить событие click на соответствующей ссылке панели. Например, с аккордеоном с идентификатором "аккордеон", с тремя панелями, если вы хотите показать 2 панели, используйте:

$("a[href=#accordion-2]").click()

Или любой другой идентификатор, который вы дали своей второй панели (я использую twitterboostrapmvc, чтобы идентификаторы панели автоматически генерировались из идентификатора аккордеона).

Answer 3

Для тех, кто использует data-target атрибуты для управления аккордеоном (а не href атрибут), это адаптация ответа ProfNimrod, который будет щелкать соответствующий элемент, если цель в настоящее время скрыта. (Обратите внимание, что if проверка зависит от настройки аккордеона с collapsed класс, применяемый по умолчанию, который я нахожу полезным в любом случае, чтобы использовать css, чтобы поставить значок шеврона на аккордеонах).

var expandAccordion = function() {
    var header = $('[data-target="#accordion-0"]');
    if (header.hasClass('collapsed')) {
        header.click();
    }
}