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

时间:2013-02-23 04:16:50

标签: twitter-bootstrap

我有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。结果相同。) 所有引导程序文件都直接从引导程序网站下载。

1 个答案:

答案 0 :(得分:-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>