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

Question

我有一些使用 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);
}

这些都是半功能性的。问题是，一旦使用了全部展开和全部折叠按钮，引导按钮将不再响应。单击全部折叠使切换仅折叠，单击全部展开使切换仅展开。

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

Answer 1

对 [Bootstrap via W3][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