从代码中显示，隐藏或切换后，Bootstrap Collapse不会切换 [英] Bootstrap Collapse doesn't toggle after you show, hide or toggle from code

问题描述

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

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

如果删除JavaScript代码，您会注意到崩溃的倒塌运作正常。如果单击快速链接，我的菜单将关闭，快速链接将打开。

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.

如果您离开JS，您会注意到打开我的菜单 菜单或快速链接不会导致其他任何内容崩溃，但如果您打开队列，它仍然会导致其他人崩溃。

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.

它没有如果我在崩溃中使用切换，显示或隐藏命令似乎很重要，它将打破切换功能。

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

所以，2个问题：

1. 如何以编程方式显示/隐藏组没有打破切换功能？

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

如何切换打开的东西？

推荐答案

1.尝试使用 collapse（）选项，'父'很重要

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

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

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

2.基本上你有2种方法：

2.Basically you have 2 ways:

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

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

当div关闭时，使用 collapse（）选项'toggle'：true ，如上所述。

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

希望有所帮助。

这篇关于从代码中显示，隐藏或切换后，Bootstrap Collapse不会切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！