Question

我使用adminlte模板中的折叠框。我有一个问题，第一次当我想要显示此框（点击 - 后），动画不起作用，内容立即显示。它在另一次点击后开始工作。任何人都可以帮我立即初始化动画吗？...

<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/

＆＃13;

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

＆＃13;

您在display:none;＆amp;中失踪.box-body .box-footer。

希望这会对你有所帮助。

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

1 个答案: