jquery 如何在adminlte中设置所有的盒子折叠？

dly7yett 于 2022-12-03 发布在 jQuery

关注(0)|答案(2)|浏览(194)

我有一个可折叠的框在管理。默认情况下，当页面加载，它是展开的。如何使它默认折叠？
下面是我用来做盒子的东西：
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
})

jquery

来源：https://stackoverflow.com/questions/57147681/how-to-set-all-boxes-collapsed-in-adminlte

2条答案

按热度按时间

bcs8qyzn1#

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

赞(0）回复(0）举报 2022-12-03

kkbh8khc2#

首先，将collapsed-box和<div class="box">相加。
然后，将display: noneinline 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>

应该可以的

赞(0）回复(0）举报 2022-12-03

我来回答

jquery 如何在adminlte中设置所有的盒子折叠？

2条答案

相关问题

热门标签

最新问答