使用 Bootstrap 折叠全部展开和折叠所有按钮

Question

我有几 (8) 个使用 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);
}

这些功能只有一半。问题是，一旦使用了全部展开和全部折叠按钮，bootstrap 按钮就不再无响应。单击 collapse all 使切换仅折叠，单击 expand all 使切换仅展开。

有没有更好的方法来做到这一点，或者有什么方法可以使我的解决方案发挥作用？

Answer 1

通过 W3 对 [Bootstrap 进行了一些研究][1]，发现我可以将我的 js/jquery 函数更改为：

function expand() {
   $('.collapse').collapse('show');
}
function collapse() {
   $('.collapse').collapse('hide');
}

Bootstrap 有 .collapse() 方法可以使用并解决功能问题。感谢您的回复！
[1]: https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

使用 Bootstrap 折叠全部展开和折叠所有按钮

Expand All & Collapse All Buttons using Bootstrap Collapse

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3

bootstrap-accordion