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

时间:2017-06-27 16:16:58

标签: javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-accordion

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

这些功能正常。问题是,一旦展开全部并折叠所有按钮,引导按钮就不再响应。单击全部折叠会使切换仅折叠,单击展开全部会使切换仅展开。

有更好的方法可以做到这一点,还是让我的解决方案正常运行?

1 个答案:

答案 0 :(得分:0)

Bootstrap via W3进行了一些研究,发现我可以将js / jquery函数更改为:

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

Bootstrap具有可以使用的.collapse()方法并解决了功能问题。谢谢你的回应!