模态进度条打破了我的下拉菜单引导程序 3.x答案

【问题标题】：Modal progress bar breaks my dropdown Menus bootstrap 3.x模态进度条打破了我的下拉菜单引导程序 3.x
【发布时间】：2014-12-22 06:17:43
【问题描述】：

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

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

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

如果我删除上面的 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>

【问题讨论】：

你包含的所有外部脚本是什么？
这个问题是因为加载 jquery 2 次和 bootstrap min 文件 2 次希望如此。
能否在 fiddle 或 codepen 中重现问题？

标签： javascript jquery html css twitter-bootstrap-3

【解决方案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 在依赖于它的其他脚本之前加载。

【讨论】：