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

У меня проблема с обвалом bootstrap 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, демонстрирующий эту проблему

Воспроизведение:

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

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

Ответы

Ответ 1

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

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

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

Демо-версия Bootply

Подробнее о событиях collapse вы можете узнать здесь: http://getbootstrap.com/javascript/#collapse

Ответ 2

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

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

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

Ответ 3

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

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