javascript - 由于 jquery 脚本，Bootstrap 折叠按钮不起作用

Question

所以我正在开发fullcalendar并将其与AdminLTE集成。我已经得到了我想要的输出

但后来我意识到引导折叠按钮不起作用或没有反应以及其他可点击的功能。我尝试检查脚本并发现它与 <script src='fullcalendar-2.5.0/lib/jquery.min.js'></script> 有关。因为当我尝试删除它时，它再次起作用，但日历变成这样

这是我的脚本:它与脚本的顺序有关吗，尽管我已经尝试将 jquery.min.js 放在上面，但仍然没有任何反应。任何帮助将不胜感激。

 <!-- jQuery 2.1.4 -->
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
      $.widget.bridge('uibutton', $.ui.button);
    </script>
    <!-- Bootstrap 3.3.5 -->
        <script src="bootstrap/js/bootstrap.min.js"></script>
         <script src="bootstrap/js/moment.js"></script>
    <!-- Morris.js charts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="plugins/morris/morris.min.js"></script>
    <!-- Sparkline -->
    <script src="plugins/sparkline/jquery.sparkline.min.js"></script>
    <!-- jvectormap -->
    <script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <!-- jQuery Knob Chart -->
    <script src="plugins/knob/jquery.knob.js"></script>
    <!-- daterangepicker -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
    <script src="plugins/daterangepicker/daterangepicker.js"></script>
    <!-- datepicker -->
    <script src="plugins/datepicker/bootstrap-datepicker.js"></script>
    <!-- Bootstrap WYSIHTML5 -->
    <script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
    <!-- Slimscroll -->
    <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="plugins/fastclick/fastclick.min.js"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <script src="dist/js/pages/dashboard.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="dist/js/demo.js"></script>

    <script src='fullcalendar-2.5.0/lib/jquery.min.js'></script>
  <script src='fullcalendar-2.5.0/lib/jquery-ui.custom.min.js'></script>
  <script src='fullcalendar-2.5.0/fullcalendar.min.js'></script>

日历 html:

 <div class="box box-danger table-responsive">
                  <div class="box-header">
                     <i class="fa fa-calendar"></i>
                    <h3 class="box-title">Calendar</h3>
                    <div class="box-tools pull-right">
                       <button class="btn btn-box-tool  pull-right " data-widget="collapse"><i class="fa fa-minus"></i></button>
                      <button type="button" class="btn btn-info btn-sm pull-right" data-toggle="modal" data-target="#myModal1">Add</button>
                          <!-- Trigger the modal with a button -->
     <!-- Modal --> </div><!-- /.box-tools -->
                  </div><!-- /.box-header -->
                  <div class="box-body pad">




                    <div id='calendar'></div>




                  </div><!-- /.box-body -->
                </div><!-- /.box -->

Answer 1

试试这个:

<button class="btn btn-box-tool  pull-right " data-target=".navbar-collapse">
    <i class="fa fa-minus"></i>
</button>

或者如果这不起作用，请尝试以下操作:

$(document).ready(function(){
  $(".btn-box-tool").click(function(){
    $("#calendar").slideUp("slow");
  });
});