21

我的 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. 如何打开东西？

4

3 回答 3

23

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 打开。

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

希望能帮助到你。

于 2013-07-19T22:17:00.957 回答
8

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

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

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

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

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

于 2015-01-30T02:20:54.020 回答
3

您也可以添加和调用而无需额外的键data-parent="#navaccordion"，例如<div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion">'parent'.collapse({"toggle": true});

于 2014-01-17T20:55:20.817 回答