javascript - 模态进度条打破了我的下拉菜单 bootstrap 3.x

Question

当我在 Modal 中使用进度条时，我在 html 文档的底部添加了以下内容:

   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

这工作正常，但在添加此行后，我的引导下拉菜单停止工作。

如果我删除上面的脚本 src 行，我的下拉菜单会再次开始工作，但模式进度条不起作用。显示模态但未执行任何进度操作。

进度条在常规页面中有效。只有模态不起作用。

当我使用下拉菜单的检查器时。单击时它不执行任何操作。JS 控制台没有错误。

HTML

<td class="text-center">
 <div class="btn-group"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-cog"></i></a>
 <ul class="dropdown-menu pull-right text-left">
 <li><a href="#" data-toggle="notify" data-message="Collecting device information" data-options="{&quot;status&quot;:&quot;success&quot;, &quot;pos&quot;:&quot;top-right&quot;}">Check device status</a>
  </li>
  <li><a href="services.html">Deploy Services</a>
  </li>                                       
  </ul>
  </div>
  </td>  

模态

<!-- My modal -->
    <div class="modal fade" id="getInfoModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Connecting to system...</h4>
          </div>
          <div class="modal-body">                    
                    <div id="modalProgressBar" class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>                    
                    </div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

Javascript

$('#getInfoModal').on('show.bs.modal', function(e) {

    // Introduce delay and close after progress bar finish
    setTimeout(func, 3000);
        function func() {
            $('#getInfoModal').modal('hide');
            $('#devicestatus').parent().show();         
            $('.modal-backdrop').remove();
    }

    setTimeout(function(){
       $('#modalProgressBar').progressbar(100);
    }, 1000);

});

我用这个例子: http://codepen.io/bseth99/pen/BmHcF

添加 bootstrap.min.js 后下拉菜单不起作用的结果相同。

包括所有脚本:

   <script src="vendor/jquery/jquery.min.js"></script>
   <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
   <!-- Plugins-->
   <script src="vendor/chosen/chosen.jquery.min.js"></script>
   <script src="vendor/slider/js/bootstrap-slider.js"></script>
   <script src="vendor/filestyle/bootstrap-filestyle.min.js"></script>
   <!-- Animo-->
   <script src="vendor/animo/animo.min.js"></script>
   <!-- Sparklines-->
   <script src="vendor/sparklines/jquery.sparkline.min.js"></script>
   <!-- Slimscroll-->
   <script src="vendor/slimscroll/jquery.slimscroll.min.js"></script>
   <!-- Store + JSON-->
   <script src="vendor/store/store+json2.min.js"></script>
   <!-- ScreenFull-->
   <script src="vendor/screenfull/screenfull.min.js"></script>
   <!-- App Main-->

   <script src="app/js/app.js"></script>

   <!-- END Page Custom Script-->

   <script src="http://code.jquery.com/jquery.js"></script>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

   <!-- START Page Custom Script-->
   <script src="app/js/progressbar.js"></script>

Answer 1

替换行:

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

使用以下几行:

<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

确保 jquery 和 bootstrap 在依赖它的其他脚本之前加载。