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

删除ref to bootstrap.min.js使下拉列表正常工作.我糊涂了.我不应该同时包含.js和.css吗？

(我尝试在css文件之前包含jQuery.结果相同.)(我也尝试在css之前包含javascript.结果相同.)所有引导程序文件都直接从引导程序网站下载.

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>