javascript - 如何立即开始折叠框(adminlte)的动画？

Question

我正在使用来自 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 -->

Answer 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;。

希望对您有所帮助。