如何實施twitter bootstrap手風琴？

我試圖實現twitter引導崩潰插件（http://twitter.github.io/bootstrap/2.3.2/javascript.html#collapse），我似乎無法得到它的工作。認爲我的開發環境出了問題，我建立了一個JSfiddle，而且我仍然遇到同樣的問題。這裏的的jsfiddle：如何實施twitter bootstrap手風琴？

http://jsfiddle.net/qdqrT/1/

這裏是直接從引導例如複製的HTML。

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
     Collapsible Group Item #1 
     </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse in"> 
     <div class="accordion-inner"> 
     Anim pariatur cliche... 
     </div> 
    </div> 
    </div> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
     Collapsible Group Item #2 
     </a> 
    </div> 
    <div id="collapseTwo" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     Anim pariatur cliche... 
     </div> 
    </div> 
    </div> 
</div>

的CSS和javscript直接取自引導定製頁面，只有崩潰CSS和JS和JS變遷理論（這是崩潰插件的依賴）。

任何人都知道爲什麼這是壞的？

來源

2013-04-10 larkfofty

我明白了。我想你可能沒有包括所有必需的資源。

我結束了包括BootstrapCDN

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

這裏引導CSS和JS的託管版本的工作版本：http://jsfiddle.net/qdqrT/3/

來源

2013-04-10 02:23:34 lightswitch05

這很好，謝謝你的回覆。儘管如此，我寧願不包括整個引導程序框架。至於爲什麼定製的bootstrap軟件包不工作，我有點困惑。 – larkfofty 2013-04-10 18:18:27

我需要更多地瞭解它，但是我認爲你的版本不工作，因爲你缺少一些適用的CSS規則，而不是因爲你缺少任何javascript。 – lightswitch05 2013-04-10 19:44:55

我有引導的新版本試了一下（3.3.4）並且當包含正確的文件時，問題中的代碼工作。

沒有必要使用引導程序的CDN版本（但如果您願意，您可以使用）。

我已經引導在一個子目錄，在我的HTML如下：

<!-- Bootstrap CSS (put this in the header of your HTML file)--> 
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> 

<!-- Bootstrap Javascript (put this at the end of your HTML file)--> 
<script src="bootstrap/js/bootstrap.min.js"></script>

（我知道這個問題是舊的，但我想我的答案比接受的答案更是最新的，希望它會幫助別人）

來源

2015-03-23 14:29:11 paulo62

如何實施twitter bootstrap手風琴？

回答

相關問題