web-dev-qa-db-ja.com

Twitterの実装方法bootstrapアコーディオン？

Twitterを実装しようとしていますbootstrap折りたたみプラグイン（ http://Twitter.github.io/bootstrap/2.3.2/javascript.html#collapse ）私の開発環境に問題があると思って、JSfiddleをセットアップしましたが、それでも同じ問題が発生します。jsfiddleは次のとおりです。

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

bootstrapの例から直接コピーされた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は、bootstrapカスタマイズページから直接取得されました。CSSとJSの折りたたみと、JSの折りたたみ（これは折りたたみプラグインの依存関係です）のみです。

なぜこれが壊れているのか誰でも知っていますか？

javascriptjquerycsstwitter-bootstrapaccordion
7
larkfofty

私はそれを働かせました。必要なすべてのリソースが含まれていない可能性があります。

ホストされたバージョンのbootstrap CSSとJS 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">

これが作業バージョンです： http://jsfiddle.net/qdqrT/3/

12
lightswitch05

私は新しいバージョンのbootstrap（3.3.4））で試してみましたが、質問のコードは正しいファイルが含まれているときに機能しました。

CDNバージョンのbootstrapを使用する必要はありませんでした（必要に応じて使用できます））。

bootstrapがサブディレクトリにあり、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>

（私は質問が古いことを理解していますが、私の答えは受け入れられた答えよりも最新であり、うまくいけば誰かの助けになると思います）

0
paulo62