我尝试以编程方式使用 Bootstrap 折叠插件的切换功能。
当我单击手风琴标题中的链接时,我设法切换 div,但它只能工作一次,也就是说我无法再次单击来隐藏 div。
这是我的代码:
<div id="accordion" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a id="program${bean.id}" data-parent="#accordion"
class="accordion-toggle">
...
</a>
</div>
<div id="collapse${bean.id}" class="accordion-body collapse">
<div class="accordion-inner">
...
</div>
</div>
</div>
后来在 JSP 中:
$.each($('#accordion a.accordion-toggle'), function(i, link){
$(link).on('click',
function(){
// ...
$('#collapse' + id_of_a_bean).collapse({
toggle : true,
parent : '#accordion'
});
// ...
}
)
});
我错过了什么?
我猜这发生在很多人身上。
当您致电collapse
函数(仅供参考或任何引导函数),如果您传递一个对象,则意味着您initiate崩溃。这toggle
选项仅切换一次调用时 (doc).
您必须使用参数调用一次,然后仅使用操作(作为字符串)调用。
$.each($('#accordion a.accordion-toggle'), function(i, link){
var $collapsible = $('#collapse' + id_of_a_bean); // Let's be thorough
$collapsible.collapse({
toggle : true, // May not be necessary anymore
parent : '#accordion'
});
$(link).on('click',
function(){
// ...
$collapsible.collapse('toggle'); // Here is the magic trick
// ...
}
);
});
现场演示:http://jsfiddle.net/Sherbrow/uycBa/
准确地说,您只能调用一次 init 进程,因为如果您已经在同一元素上完成了该操作,它就会中止。这就是为什么它只起作用了一次。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)