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>

包括bootstrap.min.js中断下拉列表

1 个答案: