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

Question

提问by Moolie

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.

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

My HTML:

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

还有一些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

我的 jsfiddle 演示了这个问题

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!

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

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

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

Answer 1

回答by Zim

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

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

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

Bootply 演示

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

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

Answer 2

回答by ProfNimrod

I think the problem is due to the way you are changing the open panel. Rather than using the 'show' feature you need to fire the click event on the appropriate panel link. For example with an accordion with an id "accordion", with three panels, if you want to show the 2 panel then use:

我认为问题在于您更改打开面板的方式。您需要在适当的面板链接上触发点击事件，而不是使用“显示”功能。例如，带有 id 为“accordion”的手风琴，带有三个面板，如果要显示 2 个面板，请使用：

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

Or whatever ID you have given your second panel (I use twitterboostrapmvc so the panel ids are auto-generated from the accordion ID).

或者您为第二个面板提供的任何 ID（我使用 twitterboostrapmvc，因此面板 ID 是从手风琴 ID 自动生成的）。

Answer 3

回答by Tim

For anyone using data-targetattributes to control the accordion (rather than the hrefattribute), this is an adaptation of ProfNimrod's answer which will click the relevant element if the target is currently hidden. (Note that the ifcheck relies on setting up the accordion with the collapsedclass applied by default, which I find useful anyway to take advantage of using css to put a chevron icon on the accordions).

对于使用data-target属性来控制手风琴（而不是href属性）的任何人，这是对 ProfNimrod 答案的改编，如果目标当前隐藏，它将单击相关元素。（请注意，if检查依赖于collapsed使用默认应用的类设置手风琴，我发现无论如何利用 css 在手风琴上放置 V 形图标很有用）。

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