包括 bootstrap.min.js 中断下拉列表 [英] including bootstrap.min.js breaks dropdown

问题描述

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

I have a navbar-collapse. If I use the code shown below, dropdowns stop working. (Clicking a dropdown item does nothing.)

    <!-- 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 吗?

removing the ref to bootstrap.min.js makes dropdowns work correctly. I'm confused. Am I not supposed to include both .js and .css?

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

(I tried including jQuery before the css files. Same result.) (I also tried including javascript before css. Same result.) All bootstrap files were downloaded straight from the bootstrap website.

推荐答案

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

The reference to the bootstrap.js file is important since the drop down function is included in it . On line 637 in bootstrap.js the drop-down definition is defined . like :

  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 文件的引用不会使下拉功能起作用.

The same way its defined in the bootstrap.min.js which is minified version of bootstrap.js . Removing the reference to the bootstrap.js file will not make the dropdown function to work .

此外，我会建议您在页脚中使用 javascripts .. 就像

Also I will advise you to use the javascripts in footer .. like

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

这篇关于包括 bootstrap.min.js 中断下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！