因此,我正在研究全日历并将其与AdminLTE集成。我有想要的输出

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

但后来我意识到,引导折叠按钮不起作用或没有反应,还有其他可点击的功能。我试图检查脚本并发现它与<script src='fullcalendar-2.5.0/lib/jquery.min.js'></script>有关,因为当我尝试删除它时,它又可以工作了,但是日历变得像这样javascript - Bootstrap折叠按钮由于jquery脚本不起作用-LMLPHP

这是我的脚本:尽管我已经尝试将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 -->

最佳答案

尝试这个:

<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");
  });
});

10-05 20:35
查看更多