使用 Django 时让 JavaScript 下拉菜单在 Twitter Bootstrap 中工作的问题答案

【问题标题】：problems getting JavaScript dropdown to work in Twitter Bootstrap while using Django使用 Django 时让 JavaScript 下拉菜单在 Twitter Bootstrap 中工作的问题
【发布时间】：2012-10-27 00:01:14
【问题描述】：

我编写了一个非常简单的 Django Web 应用程序，它将 url 指向视图，然后让视图呈现模板。我想在我的模板中使用 Twitter Bootstrap，以使我的应用程序的前端更可用。 Twitter Bootstrap 的 CSS 似乎工作正常，但我在使用 JavaScript 时遇到了问题。我在我的模板目录中设置了一个名为 dropdown.html 的测试页面，它包含以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Simple test of JavaScript dropdown menus in Twitter Bootstrap</title>

    <!-- Le styles -->
    <link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>

    <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js"></script>
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">Dropdown test</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

  </body>
</html>

这是结果页面的屏幕截图：

我知道 CSS 和 JavaScript 文件正在传送到浏览器，因为我可以看到 Django 的日志输出，它显示以下内容：

[06/Nov/2012 18:14:30] "GET /dropdown/ HTTP/1.1" 200 1465
[06/Nov/2012 18:14:30] "GET /static/bootstrap/js/bootstrap.js HTTP/1.1" 200 56478
[06/Nov/2012 18:14:30] "GET /static/bootstrap/css/bootstrap.css HTTP/1.1" 200 121663

另外，当我在 Firefox 中加载页面并使用 Firebug 来“查看源代码”时，我可以看到包含的 JavaScript（bootstrap.js 的所有 2025 行），并且下拉代码正好在我期望的位置（行第571章）。

不幸的是，当我点击下拉菜单时，没有任何反应。

【问题讨论】：

标签： javascript django drop-down-menu twitter-bootstrap django-templates

【解决方案1】：

一旦我也加入了 JQuery，它就开始工作了。我上面示例中的<head> 应该如下所示：

<head>
    <meta charset="utf-8">
    <title>Simple test of JavaScript dropdown menus in Twitter Bootstrap</title>

    <!-- Le styles -->
    <link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>

    <script src="{{ STATIC_URL }}jquery/jquery-1.8.2.js"></script>
    <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js"></script>
  </head>

【讨论】：