-1

次のテストコードがあります。

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Ti Productions</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  </head>
<body>

    <div class="navbar">
    <div class="navbar-inner">
    <div class="container">

    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </a>

    <!-- Be sure to leave the brand out there if you want it shown -->
    <a class="brand" href="#">Project name</a>

    <!-- Everything you want hidden at 940px or less, place within here -->
    <div class="nav-collapse collapse">
    <!-- .nav, .navbar-search, .navbar-form, etc -->

              <ul class="nav">
              <li><a href="">home</a></li>
              <li><a href="">about</a></li>
              <li><a href="">help</a></li>
          </ul>
    </div>

    </div>
    </div>
    </div>

    <script src="assets/js/bootstrap-collapse.js"></script>
  </body>
 </html>

基本的に、ここに示す折りたたみ可能なメニューをテストしようとしています。

http://twitter.github.io/bootstrap/components.html#navbar

指示に従って、boostrap レスポンシブ css ファイルと、collapse.js ファイルをダウンロードしました。ページがファイルをロードし、メニューが表示されます。次に、ブラウザのサイズを縮小すると、メニューが折りたたまれ、ボタンが表示されます。しかし、メニューを開くことができません。ボタンをクリックして折りたたまれたメニューを表示すると、次のエラーが表示されます。

--
[19:08:40.348] TypeError: $ is undefined @
https://myserver/mysite/assets/js/bootstrap-collapse.js:126

そのファイルの 126 行目は次のようになります。

  $.fn.collapse = function (option) {

何が間違っているのかわかりません。任意の推測をいただければ幸いです。

編集1

不足している jquery.js ファイルを追加しましたが、問題は解決していません。ページの下部にあるインクルードは次のようになります。

<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
4

2 に答える 2

1

jquery が正しくロードされているかどうかを確認します。IN Firebug またはコンソールで「$」を実行してみてください。このタイプのエラーは、jquery がカスタム スクリプトの前にロードされていない場合、またはプロトタイプのような「$」を使用する他のライブラリと競合している場合に発生します。

于 2013-05-19T05:19:26.780 に答える
1

これ$は jQuery 関数であり、bootstrap-collapse.js の前に含める必要があります。

このシーケンスを試してください

<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
于 2013-05-18T23:24:17.150 に答える