twitter-bootstrap 从代码显示、隐藏或切换后，Bootstrap Collapse 不会切换

Bootstrap Collapse doesn't toggle after you show, hide or toggle from code

提问by Pete

My HTML is:

我的 HTML 是：

<div id="accordion-container">
    <div class="accordion" id="navaccordion">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseMenu">
                    <strong>My Menus</strong>
                </a>
            </div>
            <div id="collapseMenu" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <div class="navigation" id="navigationcontainer">
                        <span id="menutree">
                            MenuTree
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQuickLinks">
                    <strong>Quick Links</strong>
                </a>
            </div>
            <div id="collapseQuickLinks" class="accordion-body collapse">
                <div class="accordion-inner">
                    <div class="quicklinks" id="quicklinkscontainer">
                        <span id="quicklinkslist">
                            QuickLinks
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQueue">
                    <strong>Queue</strong>
                </a>
            </div>
            <div id="collapseQueue" class="accordion-body collapse">
                <div class="accordion-inner">
                    <div class="queue" id="queuecontainer">
                        <span id="queuetree">
                            Queue
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

My example is here: http://jsfiddle.net/pdavis68/Xut4C/2/

我的例子在这里：http: //jsfiddle.net/pdavis68/Xut4C/2/

If you remove the JavaScript code, you'll notice that the toggling of the collapse operates properly. If you click "Quick Links", "My Menus" closes and "Quick Links" opens.

如果您删除 JavaScript 代码，您会注意到折叠的切换正常运行。如果单击“快速链接”，“我的菜单”将关闭，而“快速链接”将打开。

If you leave the JS in, you'll notice that opening "My Menus" or "Quick Links" doesn't cause anything else to collapse, but if you open "Queue", it will still cause the others to collapse.

如果你把 JS 留在里面，你会注意到打开“我的菜单”或“快速链接”不会导致其他任何东西崩溃，但如果你打开“队列”，它仍然会导致其他东西崩溃。

It doesn't seem to matter if I use "toggle", "show" or "hide" command in the collapse, it will break the toggling functionality.

如果我在折叠中使用“切换”、“显示”或“隐藏”命令似乎并不重要，它会破坏切换功能。

Also, in the example, what ought to happen (by my reckoning, at least) is that that "My Menus" should toggle closed (which it does) and then "Quick Links" ought to toggle open (which it does NOT do.)

此外，在示例中，应该发生的事情（至少根据我的估计）是“我的菜单”应该切换关闭（它确实如此），然后“快速链接”应该切换打开（它不会这样做。 )

So, 2 questions:

所以，2个问题：

1. How do I programmatically show/hide groups without breaking the toggle functionality?

2. How do I toggle things open?

1. 如何在不破坏切换功能的情况下以编程方式显示/隐藏组？

2. 如何打开东西？

回答by Hieu Nguyen

1.Try to use collapse()with options, the 'parent'is important

1. 尝试collapse()与选项一起使用，这'parent'很重要

$("#collapseMenu").collapse({"toggle": true, 'parent': '#navaccordion'});
$("#collapseQuickLinks").collapse({"toggle": true, 'parent': '#navaccordion' });

Fiddle: http://jsfiddle.net/hieuh25/Xut4C/6/

小提琴：http: //jsfiddle.net/hieuh25/Xut4C/6/

2.Basically you have 2 ways:

2.基本上你有两种方式：

• Add class into that div, e.g: <div id="collapseMenu" class="accordion-body collapse in">cause that div to open.

• Use collapse()with option 'toggle': trueas above, when the div is closed.

• 将类添加in到该 div，例如：<div id="collapseMenu" class="accordion-body collapse in">导致该 div 打开。

• 当 div 关闭时，与上述collapse()选项一起使用'toggle': true。

Hope it helps.

希望能帮助到你。

回答by Jared Christensen

Try activating your content as a collapsible element first. I skimmed over this part when reading the documentation and it really stumped me.

首先尝试将您的内容激活为可折叠元素。我在阅读文档时略读了这部分，这真的让我很难过。

$('#myCollapsible').collapse({
    toggle: false
})

After you activate it you can hide and show it as usual.

激活它后，您可以像往常一样隐藏和显示它。

$('#myCollapsible').collapse('hide');
$('#myCollapsible').collapse('show');

http://getbootstrap.com/javascript/#collapse-methods

http://getbootstrap.com/javascript/#collapse-methods

回答by woto

You also can add data-parent="#navaccordion"to <div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion">and call without addional key 'parent'like .collapse({"toggle": true});

您还可以添加data-parent="#navaccordion"到<div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion">和没有addional键调用'parent'像.collapse({"toggle": true});