Question

我遇到了最棘手的问题，无法弄明白。我正在使用bootstrap中的一系列可折叠按钮，如果我在jquery之前调用boostrap，一切似乎都能正常工作：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

但是，如果我在boostrap之前调用jquery（应该这样做），那么可折叠程序在打开后不会关闭。我不确定我是否在调用彼此不兼容的库，或者可能还有其他我不知道的问题？完整的<head>代码为：

<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.css" rel="stylesheet" />   
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<link href="https://cdn.bootcss.com/dragula/3.7.1/dragula.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.js"></script>

可折叠的样本：

<div class="container" id="maincontainer">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse1"><center><b>My Panel</b></center></a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
               <ul class="list-group">                   
                  ### contents
               </ul
            </div>
        </div>
     </div>
  </div>

Answer 1

我猜你正在为你的网站使用模板。

所以你的可折叠可能是将bootstrap与jQuery的$(document).ready结合使用，因此需要在jQuery代码之前加载bootstrap，否则你会缺少DOM的部分内容。

在bootstrap之前调用jQuery的事情是你的jQuery代码包含很多$(document).ready(function() { code }) ;块，这意味着需要加载DOM（页面的整个结构）才能使代码执行。

因此，如果你在bootstrap之前调用jQuery，它将遍历你所有的jQuery代码，并在很多代码块上给出错误，因为在jQuery代码已经存在之后，你的DOM的大部分（引导程序集成部分）被加载执行。

所以我的猜测（因为我看不到你的整个代码）会是你的代码很好而且只是按照正确的顺序调用脚本。

使用可折叠时，Boostrap和JQuery的正确调用顺序

1 个答案: