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

Question

我在 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
})

Answer 1

首先，将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>

应该可以。

Answer 2

尝试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 class

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

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

How to set all boxes collapsed in adminlte?

html

jquery

collapse

adminlte

bootstrap-4