Question

我有以下测试代码：

<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>

Answer 1

$是一个jQuery函数，需要在bootstrap-collapse.js之前包含。

尝试此序列

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

Answer 2

检查jquery是否正确加载。在Firebug或控制台尝试运行“$”。如果在自定义脚本之前未加载jquery，或者它们与使用'$'之类的原型的其他库发生冲突，则会出现此类错误。

引导崩溃js文件给出错误

2 个答案: