如何立即开始折叠框（adminlte）的动画？答案

【问题标题】：How to start animation of collapsed box (adminlte) immediately?如何立即开始折叠框（adminlte）的动画？
【发布时间】：2017-09-12 12:20:54
【问题描述】：

我正在使用来自adminlte 模板的折叠框。我有一个问题，当我第一次想要显示此框时（单击 - 后），动画不起作用并且内容立即显示。再次单击后它开始工作。谁能帮我立即初始化动画？...

jsfiddle

<div class="box collapsed-box">
  <div class="box-header with-border">
    <h3 class="box-title">Default Box Example</h3>
    <div class="box-tools pull-right">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
     <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
     </button>
    </div>
    <!-- /.box-tools -->
  </div>
  <!-- /.box-header -->
  <div class="box-body">
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  </div>
  <!-- /.box-body -->
  <div class="box-footer">
    The footer of the box
  </div>
  <!-- box-footer -->
</div>
<!-- /.box -->

【问题讨论】：

标签： javascript jquery html css adminlte

【解决方案1】：

这里有一个解决方案https://jsfiddle.net/ocoj8g35/4/

<link href="https://cdn.rawgit.com/almasaeed2010/AdminLTE/6157c7bc/dist/css/AdminLTE.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/almasaeed2010/AdminLTE/6157c7bc/dist/js/adminlte.min.js"></script>
<div class="box collapsed-box">
  <div class="box-header with-border">
    <h3 class="box-title">Default Box Example</h3>
    <div class="box-tools pull-right">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
     <button type="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" style="display:none;">
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  </div>
  <!-- /.box-body -->
  <div class="box-footer" style="display:none;">
    The footer of the box
  </div>
  <!-- box-footer -->
</div>
<!-- /.box -->

您在.box-body 和.box-footer 中缺少display:none;。

希望这会对你有所帮助。

【讨论】：