Bootstrap 3 折叠可以在以编程方式打开面板后打开多个面板

本文介绍了Bootstrap 3 折叠可以在以编程方式打开面板后打开多个面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我的HTML:

显示面板3</button><button type="button" class="btn hidepanel">隐藏面板3</button><button type="button" class="btn openpanel">打开面板3</button><button type="button" class="btn closepanel">关闭面板3</button><小时/><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">面板 1</a>

<div id="panel1" class="panel-collapse collapse"><div class="panel-body">内容面板 1

<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">面板 2</a>

<div id="panel2" class="panel-collapse collapse"><div class="panel-body">内容面板 2

<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">面板 3</a>

<div id="panel3" class="panel-collapse collapse"><div class="panel-body">内容面板 3

还有一些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('隐藏');});

我的 jsfiddle 演示了这个问题

重现:

点击打开面板 3"按钮.
单击面板 2"将其打开.到目前为止没有问题.
单击面板 3"以再次打开它.面板 2 保持打开状态！

因此，以编程方式打开面板似乎会弄乱有关面板状态的引导程序内部注册?我没有看到第三个面板的状态更改"有任何明显错误(它的类从折叠"更改为进入"，然后再返回，正如您所期望的那样).

解决方案

您可以为在任何面板显示之前发生的崩溃 show 事件创建处理程序.

添加此项以确保在显示所选面板之前关闭任何其他打开的面板:

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

Bootply 演示

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

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.

My 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>

And some 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');
});

My jsfiddle that demonstrates this issue

To reproduce:

Click the button 'Open panel 3'.
Click 'Panel 2' to open it. So far no problems.
Click 'Panel 3' to open it again. Panel 2 remains open!

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).

解决方案

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 demo

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

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

08-04 03:42