-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 函数，需要在 bootstrap-collapse.js 之前包含。

试试这个顺序

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

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

于 2013-05-19T05:19:26.780 回答