我有几个使用bootstrap的可折叠字段:
<div id='toggle'>
<button type='button' data-toggle='collapse' data-target='#target' id='toggle'>Title</button>
</div>
<div id='target' class='collapse'>
<p class='stuff'>Some Stuff Here</p>
</div>
这很好用,但我希望全部展开并折叠所有按钮。我想通过在onClick
事件期间添加另外两个调用函数的按钮,然后我可以使它们展开和折叠。我是这样做的:
<button type="button" onclick="expand()">Expand All</button>
<button type="button" onclick="collapse()">Collapse All</button>
调用这些函数:
function expand() {
$('.stuff').slideDown(400);
$('.collapse').slideDown(400);
}
function collapse() {
$('.stuff').slideUp(400);
$('.collapse').slideUp(400);
}
这些功能正常。问题是,一旦展开全部并折叠所有按钮,引导按钮就不再响应。单击全部折叠会使切换仅折叠,单击展开全部会使切换仅展开。
有更好的方法可以做到这一点,还是让我的解决方案正常运行?
答案 0 :(得分:0)
对Bootstrap via W3进行了一些研究,发现我可以将js / jquery函数更改为:
function expand() {
$('.collapse').collapse('show');
}
function collapse() {
$('.collapse').collapse('hide');
}
Bootstrap具有可以使用的.collapse()方法并解决了功能问题。谢谢你的回应!