AdminLTE默认情况下的折叠框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1683)

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

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

但我不确定如何使折叠框在默认情况下折叠。

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

有什么建议么?

提前致谢。

提问于
用户回答回答于

这里是步骤:

  1. 将减号图标更改为加号。
  2. 将显式样式“display:none”添加到box-body
  3. 将类“折叠框”添加到框中
用户回答回答于

为什么不把这个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 -->    

扫码关注云+社区

领取腾讯云代金券