web-dev-qa-db-ja.com

Bootstrap CollapseしないCollapse

Bootstrapを使用して折りたたみ可能なコンポーネントを作成しようとしています。私のコードはこれです

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1
    </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit
      </div>
    </div>
  </div>
</div>

「折りたたみ可能なグループアイテム＃1」をクリックすると、クラス「panel-body」のアイテムが折りたたまれますが、クリックの影響はありません。このコードをBootstrapドキュメンテーションから直接コピーしましたが、まだ動作しません。誰が問題を理解できますか？

javascriptcsstwitter-bootstrapcollapse
24
poshanniraula

jQueryが必要です;-)

[〜＃〜] demo [〜＃〜]

<html>
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <!-- THIS LINE -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit
            </div>
        </div>
    </div>
</div>

</body>
</html>
42
MaiKaY

bootstrap.jsはjqueryライブラリを使用しているため、bootstrap js。の前にjqueryライブラリを追加する必要があります。

のようにjqueryライブラリを追加してください

注：jsファイルの順序を維持してください。 htmlページは上から下へのアプローチでコンパイルします

<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
14
Jay Patel

JQueryを追加し、jQueryの1つのリンクのみが複数のリンクを機能させないようにします...

9
Terabyte

ブートストラップの 基本テンプレート を参照してください。

5
Ashkan