如何在adminlte中设置所有折叠的框？答案

【问题标题】：How to set all boxes collapsed in adminlte?如何在adminlte中设置所有折叠的框？
【发布时间】：2019-07-22 13:59:19
【问题描述】：

我在 adminlte 中有一个可折叠的盒子。默认情况下，当页面加载时，它会展开。如何让它默认折叠？

这是我用来制作盒子的：

https://adminlte.io/docs/2.4/js-box-widget

我的 HTML：

<div class="box">

  <div class="box-header with-border">

    <h3 class="box-title">Collapsible Box Example</h3>

    <div class="box-tools pull-right">
      <!-- Collapse Button -->
      <button type="button" class="btn btn-box-tool" data-widget="collapse">
        <i class="fa fa-minus"></i>
      </button>
    </div>

  </div>

  <div class="box-body">
    The body of the box
  </div>

  <div class="box-footer">
    The footer of the box
  </div>

</div>

我的脚本：

<script>
$('.box').boxWidget({
    animationSpeed: 500,
    collapseTrigger: '#my-collapse-button-trigger',
    removeTrigger: '#my-remove-button-trigger',
    collapseIcon: 'fa-minus',
    expandIcon: 'fa-plus',
    removeIcon: 'fa-times',
    hide: true
})

【问题讨论】：

您可以在没有脚本的情况下轻松地在 HTML 中完成所有折叠操作。有关示例，请参阅getbootstrap.com/docs/4.3/components/collapse。
谢谢，但我想使用管理框。

标签： jquery html bootstrap-4 collapse adminlte

【解决方案1】：

试试boxWidget('collapse')

$('.box').boxWidget({
    animationSpeed: 500,
    collapseTrigger: '#my-collapse-button-trigger',
    removeTrigger: '#my-remove-button-trigger',
    collapseIcon: 'fa-minus',
    expandIcon: 'fa-plus',
    removeIcon: 'fa-times',
    hide: true
})

$('.box').boxWidget('collapse')

或添加collapsed-box类

<div class="box collapsed-box">
 ...
</div>

【讨论】：

【解决方案2】：

首先，将collapsed-box class 添加到<div class="box">。

然后，将display: none inline style 添加到<div class="box-body"> 和<div class="box-footer">。

像这样：

<div class="box collapsed-box">
   <div class="box-header with-border">
      <h3 class="box-title">Collapsible Box Example</h3>
      <div class="box-tools pull-right">
         <!-- Collapse Button -->
         <button type="button" class="btn btn-box-tool" data-widget="collapse">
         <i class="fa fa-minus"></i>
         </button>
      </div>
   </div>
   <div class="box-body" style="display: none">
      The body of the box
   </div>
   <!-- /.box-body -->
   <div class="box-footer" style="display: none">
      The footer of the box
   </div>
</div>

它应该可以工作。

【讨论】：