html - AdminLTE 默认折叠框

Question

AdminLTE 基于 Bootstrap:https://github.com/almasaeed2010/AdminLTE

实时预览: http://almsaeedstudio.com/preview/

但我不确定如何让可折叠框默认折叠。

我假设因为它是基于 Bootstrap 构建的，所以这应该相当简单。我已经尝试过其他实现，例如将 id 设置为“collapsedOne”并尝试将 div 视为 Accordion ，但无济于事。

在 AdminLTE/app.js ~line 45 上有实现向上滑动/向下滑动以折叠框的代码。理想情况下，我们想要的是让框默认处于“向上滑动”状态，并带有“collapsed-box”类，以便在单击图标时执行“向下滑动”。

/*     
 * Add collapse and remove events to boxes
 */
$("[data-widget='collapse']").click(function() {
    //Find the box parent        
    var box = $(this).parents(".box").first();
    //Find the body and the footer
    var bf = box.find(".box-body, .box-footer");
    if (!box.hasClass("collapsed-box")) {
        box.addClass("collapsed-box");
        bf.slideUp();
    } else {
        box.removeClass("collapsed-box");
        bf.slideDown();
    }
});

有什么建议吗？

提前致谢。

Answer 1

当页面以初始状态加载时，为什么不直接将 collapsed-box 类添加到 box 元素？

以下将在折叠状态下呈现并在不修改 AdminLTE 的情况下运行:

    <!-- Default box -->    <div class="box box-solid collapsed-box">        <div class="box-header">            <h3 class="box-title">Default Solid Box</h3>            <div class="box-tools pull-right">                <button class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-plus"></i></button>                <button class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>            </div>        </div>        <div style="display: none;" class="box-body">            Box class: <code>.box.box-solid</code>            <p>bla bla</p>        </div><!-- /.box-body -->    </div><!-- /.box -->