AdminLTE 默认折叠框

Question

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

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

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

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

在 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();
    }
});

有什么建议么？

提前致谢。

原文由 user1205371 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

    <!-- 默认框 -->
    <div class="box box-solid collapsed-box ">
        <div class="box-header">
            <h3 class="box-title">默认实体框</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="显示：无；" class="box-body">
            盒子类：<code>.box.box-solid</code>
            <p>啪啪啪</p>
        </div><!-- /.box-body -->
    </div><!-- /.box -->

原文由 user4036441 发布，翻译遵循 CC BY-SA 3.0 许可协议