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

Question

我的 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 代码，您会发现折叠的切换工作正常。如果您单击“快速链接”，“我的菜单”将关闭，“快速链接”将打开。

如果你保留 JS，你会发现打开“我的菜单”或“快速链接”不会导致其他任何内容崩溃，但如果你打开“队列”，它仍然会导致其他内容崩溃.

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

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

那么，有 2 个问题:

1. 如何以编程方式显示/隐藏组而不破坏切换功能？

2. 如何切换打开状态？

Answer 1

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

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

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

2.基本上你有两种方法:

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

• 使用collapse()带选项'toggle': true如上所述，当 div 关闭时。

希望有帮助。