在显示、隐藏或从代码切换后， Bootstrap 折叠不会切换

wlzqhblo 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(182)

我的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留在中，您会注意到打开“My Menus”或“Quick Links”不会导致其他任何内容折叠，但如果您打开“Queue”，它仍然会导致其他内容折叠。
如果我在崩溃中使用“切换”、“显示”或“隐藏”命令，似乎并不重要，它会破坏切换功能。
此外，在这个例子中，应该发生的（至少根据我的估计）是“我的菜单”应该切换关闭（它确实这样做了），然后“快速链接”应该切换打开（它没有这样做）
所以，有两个问题：
1.如何以编程方式显示/隐藏组而不中断切换功能？
1.我怎么打开开关？

twitter-bootstrap

来源：https://stackoverflow.com/questions/17750907/bootstrap-collapse-doesnt-toggle-after-you-show-hide-or-toggle-from-code

3条答案

按热度按时间

g2ieeal71#

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选项。

希望能有所帮助。

赞(0）回复(0）举报 2022-12-07

n6lpvg4x2#

首先尝试将内容激活为可折叠元素。我在阅读文档时浏览了这部分，它真的难倒了我。

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

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

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

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

赞(0）回复(0）举报 2022-12-07

dwthyt8l3#

您也可以将data-parent="#navaccordion"添加到<div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion">，然后像.collapse({"toggle": true});一样调用'parent'，而无需额外的密钥

赞(0）回复(0）举报 2022-12-07

我来回答

在显示、隐藏或从代码切换后， Bootstrap 折叠不会切换

3条答案

相关问题

热门标签

最新问答