twitter-bootstrap - 包括 bootstrap.min.js 打破下拉

Question

我有一个 navbar-collapse .
如果我使用下面显示的代码，下拉菜单将停止工作。 (单击下拉项不会执行任何操作。)

    <!-- Le styles -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
    <style>
        body { padding-top: 60px; /* 60px to make the container go all the way
            to the bottom of the topbar */ }
    </style>
    <!-- Le javascripts -->
    <script type="text/javascript" src='/js/jquery-1.9.1.min.js'></script>
    <script type="text/javascript" src='/js/jquery.cookie.js'></script>
    <script type="text/javascript" src='/js/bootstrap.min.js'></script>

删除对 bootstrap.min.js 的引用使下拉菜单正常工作。我很困惑。我不应该同时包含 .js 和 .css 吗？

(我尝试在 css 文件之前包含 jQuery。结果相同。)
(我也尝试在 css 之前包含 javascript。结果相同。)
所有 Bootstrap 文件都是直接从 Bootstrap 网站下载的。

Answer 1

对 bootstrap.js 文件的引用很重要，因为其中包含下拉功能。在 bootstrap.js 的第 637 行，定义了下拉定义。喜欢 :

  var toggle = '[data-toggle=dropdown]'
, Dropdown = function (element) {
    var $el = $(element).on('click.dropdown.data-api', this.toggle)
    $('html').on('click.dropdown.data-api', function () {
      $el.parent().removeClass('open')
    })
  }

与 bootstrap.min.js 中定义的方式相同，它是 bootstrap.js 的缩小版本。删除对 bootstrap.js 文件的引用不会使下拉功能起作用。

另外我会建议你在页脚中使用 javascripts .. 喜欢

<script type="text/javascript" src='/js/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='/js/bootstrap.min.js'></script>
<script type="text/javascript" src='/js/jquery.cookie.js'></script>