AdminLTE 默认折叠框答案

【问题标题】：AdminLTE collapsed boxes by defaultAdminLTE 默认折叠框
【发布时间】：2014-09-11 03:55:21
【问题描述】：

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

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

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

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

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

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

有什么建议吗？

提前致谢。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

在 index.html 文件的 body 标签中添加 css 类：

侧边栏关闭侧边栏折叠

<body class="hold-transition sidebar-mini sidebar-closed sidebar-collapse layout-fixed layout-navbar-fixed layout-footer-fixed">

【讨论】：

【解决方案2】：

在 Admin LTE 3 中，默认情况下使用主卡上的 collapsed-card 类折叠。

这样

<div class="col-md-3">
 <div class="card collapsed-card">
   <div class="card-header" >
     <h3 class="card-title">Expandable</h3>
     <div class="card-tools">
       <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
       </button>
     </div>
   </div>
   <div class="card-body" >
     The body of the card
   </div>
 </div>
</div>

您应该将图标更改为 fas fa-plus，然后初始框以加号开头

【讨论】：

【解决方案3】：

我将它添加到 boxWidget 对象中：

setInitialCollapseStatus: function (container) {
        var _this = this;
        var collapsedBoxes = container.find('.box.collapsed-box .btn-box-tool > i');

        collapsedBoxes.each(function (index) {
            var box = $(this);
            //Convert minus into plus
            box
                .removeClass(_this.icons.collapse)
                .addClass(_this.icons.open);

        });

    }

并在初始化期间调用它：

activate: function (_box) {
        var _this = this;
        if (!_box) {
            _box = document; // activate all boxes per default
        }
        //Listen for collapse event triggers
        $(_box).on('click', _this.selectors.collapse, function (e) {
            e.preventDefault();
            _this.collapse($(this));
        });

        //Listen for remove event triggers
        $(_box).on('click', _this.selectors.remove, function (e) {
            e.preventDefault();
            _this.remove($(this));
        });

        // Set initial collapseStatus
        _this.setInitialCollapseStatus($(_box));
    },

【讨论】：

【解决方案4】：

这个解决方案对我有用：

我为菜单添加了“collapse-left”类，并为主要内容添加了“strech”类。

我为 AdminLTE 使用版本 1。它分为左侧菜单的 class="left-side" 和主要内容的 class="right-side"。

所以，这是最终的代码：

<aside class="left-side collapse-left"> 
    <!-- put the left menu here --> 
</aside>
<aside class="right-side strech"> 
    <!-- put the main content here -->
</aside>

【讨论】：

【解决方案5】：

<div class="box box-default collapsed-box">
  <div class="box-header with-border">
    <h3 class="box-title">Expandable</h3>
    <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</div><!-- /.box -->

【讨论】：

嘿一些html！你对代码有什么解释或评论吗？

【解决方案6】：

一个打开的盒子： <div class="box">

一个折叠的盒子： <div class="box collapsed-box">

然后当然改变按钮上的图标

【讨论】：

【解决方案7】：

只需将“collapsed-box”添加到框中并更改：

<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>

到

<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>

这应该对我有用

【讨论】：

【解决方案8】：

为一个指定 div

$(function() { $('your-button-id').click(); })

所有人

  $(function() { $("[data-widget='collapse']").click(); })

【讨论】：

【解决方案9】：

对于使用 AdminLTE 2.1.1

的用户

只需在<BODY> 上添加sidebar-collapse 类

之前：

 <body class="skin-blue sidebar-mini">

之后：

 <body class="skin-blue sidebar-mini sidebar-collapse">

【讨论】：

【解决方案10】：

对我有用的正确测试步骤是：

将显式样式“display:none”添加到 box-body

你已经完成了:)

        <div class="box ">
                    <div class="box-header with-border bg-yellow">
                      <h3 class="box-title">Box Title Here</h3>
                      <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                      </div>
                    </div><!-- /.box-header -->
                    <div class="box-body" style="display: none;">
                      <div class="table-responsive">

                            <!--Your content here -->

                      </div><!-- /.table-responsive -->
                    </div><!-- /.box-body -->

        </div>

【讨论】：

【解决方案11】：

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

下面将在不修改 AdminLTE 的情况下以折叠状态和功能呈现：

默认实心框

style="display: none;" class="box-body"> 盒子类：.box.box-solid

呜呜呜

【讨论】：

但是如何处理正负信号，@user4036441？使用此解决方案，当页面加载时框会折叠，但我们看到的信号是减号信号。
@AloysiadeArgenteuil 只需将图标更改为 fa-plus 而不是 fa-minus。这是初始图标，之后 AdminLTE 的 javascript 应该处理反转。
感谢您提供如此简单的解决方案。

【解决方案12】：

步骤如下：

将减号图标更改为加号。
将显式样式“display:none”添加到 box-body
将类“collapsed-box”添加到框中

【讨论】：

【解决方案13】：

$("[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 (!$(this).children().hasClass("fa-plus")) {.
        $(this).children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
        bf.slideUp();
    } else {
        //Convert plus into minus
        $(this).children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
        bf.slideDown();
    }
});

并在部分 div 中使用

【讨论】：

【解决方案14】：

$("[data-widget='collapse']").click() 将其添加到在底部运行的 JavaScript 文件中

【讨论】：

我通过编辑更新了问题。调用简单的“折叠”不起作用。
我知道这会在页面加载后折叠我的框，但是我希望默认情况下折叠框。