从代码中显示,隐藏或切换后,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,您会注意到打开"我的菜单"或"快速链接"不会导致其他任何事情崩溃,但如果您打开"队列",它仍然会导致其他人崩溃.

如果我在崩溃中使用"toggle","show"或"hide"命令似乎并不重要,它将打破切换功能.

此外,在本例中,什么应该发生(据我估计,至少)是说:"我的菜单"应触发关闭(这它),然后在"快速链接"应该切换开(它不会做. )

那么,2个问题:

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

2. 如何切换打开的东西？

Answer 1

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

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

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

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

• 将类添加in到该div,例如:<div id="collapseMenu" class="accordion-body collapse in">使该div打开.

• 当div关闭时,使用上面的collapse()选项'toggle': true.

希望能帮助到你.

Answer 2

首先尝试将内容激活为可折叠元素.在阅读文档时我浏览了这一部分,它真的让我很难过.

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

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

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

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