我的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",它仍然会导致其他的折叠。
在折叠中使用“切换”、“显示”或“隐藏”命令似乎都无关紧要,它会破坏切换功能。
此外,在这个例子中,应该发生的事情(至少在我看来是这样)是“我的菜单”应该切换为关闭(它确实是这样做的),然后“快速链接”应该切换为打开(它不这样做)。
所以,有两个问题:
如何在不中断切换的情况下以编程方式显示/隐藏组functionality?
发布于 2013-07-20 06:17:01
1.尝试使用带有选项的collapse()
,'parent'
很重要
$("#collapseMenu").collapse({"toggle": true, 'parent': '#navaccordion'});
$("#collapseQuickLinks").collapse({"toggle": true, 'parent': '#navaccordion' });
小提琴:http://jsfiddle.net/hieuh25/Xut4C/6/
2.基本上,你有两种方法:
in
添加到该目录,例如:<div id="collapseMenu" class="accordion-body collapse in">
使该目录打开。当该目录关闭时,'toggle': true
collapse()
。F213
希望能有所帮助。
发布于 2015-01-30 10:20:54
首先尝试将您的内容激活为可折叠元素。我在阅读文档时略读了这一部分,它真的把我难住了。
$('#myCollapsible').collapse({
toggle: false
})
激活后,您可以像往常一样隐藏和显示它。
$('#myCollapsible').collapse('hide');
$('#myCollapsible').collapse('show');
发布于 2014-01-18 04:55:21
您还可以将data-parent="#navaccordion"
添加到<div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion">
中并调用,而无需像.collapse({"toggle": true});
那样使用额外的'parent'
键
https://stackoverflow.com/questions/17750907
复制相似问题