爲什麼此BootStrap手風琴示例無法在我的頁面上工作？

我在Twitter的引導很新的，我有一些問題想實現一個手風琴如本官方文檔例子：http://getbootstrap.com/javascript/#collapse-example-accordion 爲什麼此BootStrap手風琴示例無法在我的頁面上工作？

我剛纔複製和以前的HTML代碼粘貼到我的網頁，我看到了手風琴的內容，但我得到的第一個面板擴大，其他2個面板摺疊。問題是我無法在這些面板上進行交互。如果我點擊第一個面板，它不會摺疊，如果我點擊2-3面板不會展開。

所以，THI是我的網頁內容：

<!DOCTYPE html> 
<html> 
<head> 
<link href="<c:url value="resources/css/style.css" />" rel="stylesheet"> 

<link href="<c:url value="resources/css/bootstrap.css" />" rel="stylesheet"> 
<link href="<c:url value="resources/css/bootstrap-theme.css" />" rel="stylesheet"> 

<script src="<c:url value="resources/js/bootstrap.js" />"></script> 

<title>Home</title> 
</head> 

<body> 

    <section> 
    <div class="container alignLeft"> 

     <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
      <div class="panel panel-default"> 
      <div class="panel-heading" role="tab" id="headingOne"> 
       <h4 class="panel-title"> 
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
        Collapsible Group Item #1 
       </a> 
       </h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
       <div class="panel-body"> 
       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
       </div> 
      </div> 
      </div> 
      <div class="panel panel-default"> 
      <div class="panel-heading" role="tab" id="headingTwo"> 
       <h4 class="panel-title"> 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
        Collapsible Group Item #2 
       </a> 
       </h4> 
      </div> 
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
       <div class="panel-body"> 
       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
       </div> 
      </div> 
      </div> 
      <div class="panel panel-default"> 
      <div class="panel-heading" role="tab" id="headingThree"> 
       <h4 class="panel-title"> 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
        Collapsible Group Item #3 
       </a> 
       </h4> 
      </div> 
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
       <div class="panel-body"> 
       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 

    </section> 

</body> 
</html>

正如你可以看到我已經正確包括bootstrap.css文件和bootstrap.js文件。

我錯過了什麼？我如何解決這個問題並獲得工作手風琴？

TNX

來源

2015-08-27 AndreaNobili

只需在bootstrap.js之前包含jQuery插件，我相信一切都會正常工作。 – Kasmetski

jap，你還需要jQuery。 – Alex

總是檢查你的瀏覽器控制檯是否有錯誤，它會在這裏告訴你你錯過了jQuery。 – DavidG

的首先你必須包括引導的製作任何與引導工作的腳本之前 jQuery（功能豐富的JavaScript庫）腳本。

下面介紹如何通過在引導腳本之前包含最新版本的jQuery來使其工作。

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="<c:url value="resources/js/bootstrap.js" />"></script>

您可能還想檢查是否要使整個面板可點擊或只是當前情況的標題中的標題部分。

來源

2015-08-27 11:39:03

需要在你的代碼中的實際jQuery庫。

在head將這個：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

來源

2015-08-27 10:14:39 Jay

爲什麼此BootStrap手風琴示例無法在我的頁面上工作？

回答

相關問題