使用Bootstrap折疊展開全部並折疊所有按鈕

Question

我有幾個（8）可折疊字段，使用引導程序遵循以下步驟：

        <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

通過W3對Bootstrap進行了一些研究，發現我可以將js / jquery函數更改為：

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

Bootstrap具有.collapse（）方法，該方法可以使用並解決功能性問題。 感謝您的回應！