Bootstrap 3崩溃可以以编程方式打开一个面板后可以打开多个面板 [英] Bootstrap 3 collapse can have multiple panels open after programmatically opening a panel

问题描述

我在引导程序3崩溃时遇到问题，以编程方式打开面板后，可以在重新打开第一个面板时保持另一个面板打开。

I have a problem with bootstrap 3 collapse, after opening a panel programmatically it is possible to keep another panel open while reopening the first panel.

我的 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

要重现：

My jsfiddle that demonstrates this issue

To reproduce:

1. 单击按钮打开面板3。


2. 单击面板2将其打开。到目前为止没有问题。


3. 单击面板3以再次将其打开。面板2仍保持打开状态！

因此，以编程方式打开面板似乎使有关面板状态的内部注册陷入混乱？我没有看到第三个面板的状态更改有任何明显的错误（它的类从折叠变为 in，然后又返回了您所期望的）。

So opening a panel programmatically seems to mess up bootstraps internal registration about panel states? I don't see anything visibly wrong with the 'state change' of the third panel (it's class changes from 'collapse' to 'in' and back as you would expect).

推荐答案

您可以为崩溃 show 事件创建一个处理程序，该事件在显示任何面板之前发生。

You can create a handler for the collapse show event which occurs just before any panels are displayed.

添加此内容以确保在显示所选面板之前关闭所有其他打开的面板：

Add this to ensure any other open panels are closed before the selected one is shown:

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

Bootply演示

您可以在此处阅读有关崩溃事件的更多信息： http://getbootstrap.com/javascript/#collapse

Bootply demo

You can read more about the collapse events here: http://getbootstrap.com/javascript/#collapse

这篇关于Bootstrap 3崩溃可以以编程方式打开一个面板后可以打开多个面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！