2013-04-10 7 views
7

私はtwitterブートストラップコラプスプラグイン(http://twitter.github.io/bootstrap/2.3.2/javascript.html#collapse)を実装しようとしていますが、動作させることができません。私の開発環境に何か問題があったと思って、JSfiddleをセットアップしました。私はまだ同じ問題を抱えています。ここでjsfiddleだ:どのようにツイッターブートストラップアコーディオンを実装するには?

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と、ブートストラップカスタマイズページから直接採取し、そしてtrasition(崩壊プラグインの依存性である)JSました。

これはなぜ壊れているのですか?

答えて

12

私はそれを働かせました。私はあなたが必要なすべてのリソースを含んでいないかもしれないと思います。私は、ブートストラップ(3.3.4)の新しいバージョンでそれを試してみましたhttp://jsfiddle.net/qdqrT/3/

+0

これは、応答のおかげですばらしいです。私はむしろ折りたたみ機能のためだけにブートストラップフレームワーク全体を含めるつもりはないでしょう。カスタマイズされたブートストラップパッケージがなぜ機能しないのか、ちょっと混乱しています。 – larkfofty

+0

私はそれをもっと見る必要がありますが、JavaScriptの設定が失われているわけではなく、適用されるいくつかのCSSルールが不足しているため、あなたのバージョンが機能していないと思います。 – lightswitch05

0

:私はここに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のホストされたバージョンを含む終わった

は作業バージョンです問題のコードは正しいファイルが含まれていると機能しました。

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> 

(私は質問が古いであることを認識が、私は私の答えは受け入れ答えよりも最新により、うまくいけば、それだと思います誰かを助けるでしょう)

関連する問題