Bootstrap navbar dropbox 不显示下拉菜单答案

【问题标题】：Bootstrap navbar dropbox does not show dropdown menuBootstrap navbar dropbox 不显示下拉菜单
【发布时间】：2014-01-11 15:32:25
【问题描述】：

我已经阅读了 stackoverflow 上有关导航栏中 dropdown box 的多个线程，但没有一个对我的问题有帮助。

我使用的是 bootstrap 版本 3，我使用的是官方网站上提供的 navbar 示例：

  http://getbootstrap.com/components/#navbar

我使用的代码与该网站上的代码完全相同，并且包括以下 javascript 和 css 文件：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="static/js/transition.js"></script>
<script type="text/javascript" src="static/js/collapse.js"></script>
<script type="text/javascript" src="static/js/dropdown.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<link rel="stylesheet" href="static/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="static/css/footer.css" type="text/css">

我下载了不同的js 和css 文件，但jquery 文件除外。我之前得到了这个工作，但即使经过大量的故障排除，现在也没有，当时脚本标签的顺序是错误的。

根据引导网站，jquery 插件是必要的，除了折叠插件依赖于过渡插件（因此放置在折叠插件之前）。然后是dropdown js 和引导程序以及css 文件。

我不明白为什么这不起作用。问题是当我点击dropdown 框时，它根本不显示菜单，什么也没有发生。我尝试了很多不同的配置，但没有任何效果。

我正在使用此代码：

     <html
     <head>
         <title>testing</title>
         <script src="http://code.jquery.com/jquery-latest.js"></script>
         <script type="text/javascript" src="static/js/transition.js"></script>
         <script type="text/javascript" src="static/js/collapse.js"></script>
         <script type="text/javascript" src="static/js/dropdown.js"></script>
         <script type="text/javascript" src="static/js/bootstrap.js"></script>
         <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css">
        <link rel="stylesheet" href="static/css/footer.css" type="text/css">
    </head>
    <body>
    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
        <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>
    </body>
    </html>

我还尝试用 erikrunia 在他的一个回复中写的代码替换所有导入，这与示例网站上的代码相同。

这是页面在浏览器呈现时的外观：

在站点上运行调试器后，我收到了这些警告/错误，但在访问引导站点本身时我也收到了很多这些，所以我不知道它们是否与实际问题有关：

18:23:45.672 file:///Users/exceed/index.html
18:23:45.673 file:///Users/exceed/static/js/jquery.js
18:23:45.674 file:///Users/exceed/static/js/transition.js
18:23:45.674 file:///Users/exceed/static/js/collapse.js
18:23:45.675 file:///Users/exceed/static/js/dropdown.js
18:23:45.675 file:///Users/exceed/static/js/bootstrap.js
18:23:45.676 file:///Users/exceed/static/css/bootstrap.css
18:23:45.676 file:///Users/exceed/static/css/footer.css
18:23:45.643 Unknown property 'box-sizing'.  Declaration dropped. bootstrap.css:93
18:23:45.643 Unknown property 'box-sizing'.  Declaration dropped. bootstrap.css:195
18:23:45.643 Unknown property 'box-sizing'.  Declaration dropped. bootstrap.css:201
18:23:45.643 Unknown pseudo-class or pseudo-element '-webkit-search-cancel-button'.  Ruleset ignored due to bad selector. bootstrap.css:205
18:23:45.644 Unknown property 'box-sizing'.  Declaration dropped. bootstrap.css:306
18:23:45.644 Expected color but found 'auto'.  Expected color but found '-webkit-focus-ring-color'.  Expected end of value but found '-webkit-focus-ring-color'.  Error in parsing value for 'outline'.  Declaration dropped. bootstrap.css:344
18:23:45.645 Unknown property 'box-sizing'.  Declaration dropped. bootstrap.css:1882
18:23:45.645 Expected end of value but found '\9 '.  Error in parsing value for 'margin-top'.  Declaration dropped. bootstrap.css:1888
18:23:45.645 Expected color but found 'auto'.  Expected color but found '-webkit-focus-ring-color'.  Expected end of value but found '-webkit-focus-ring-color'.  Error in parsing value for 'outline'.  Declaration dropped. bootstrap.css:1913
18:23:45.645 Unknown pseudo-class or pseudo-element '-webkit-outer-spin-button'.  Ruleset ignored due to bad selector. bootstrap.css:1917
18:23:45.645 Unknown pseudo-class or pseudo-element '-ms-input-placeholder'.  Ruleset ignored due to bad selector. bootstrap.css:1965
18:23:45.645 Unknown pseudo-class or pseudo-element '-webkit-input-placeholder'.  Ruleset ignored due to bad selector. bootstrap.css:1969
18:23:45.646 Unknown property 'user-select'.  Declaration dropped. bootstrap.css:2262
18:23:45.646 Expected color but found 'auto'.  Expected color but found '-webkit-focus-ring-color'.  Expected end of value but found '-webkit-focus-ring-color'.  Error in parsing value for 'outline'.  Declaration dropped. bootstrap.css:2267
18:23:45.646 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:2291
18:23:45.647 Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:3555
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5459
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5460
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5476
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5477
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5487
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5488
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5498
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5499
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5509
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5510
18:23:45.650 Unknown property 'zoom'.  Declaration dropped. bootstrap.css:5518
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5964
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5973
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6049
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6054
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6136
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6142
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6454
18:23:45.651 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:6458
18:23:45.651 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:6459
18:23:45.651 Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6463
18:23:45.651 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:6469
18:23:45.651 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:6470
18:23:45.651 Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6474
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6482
18:23:45.651 Expected end of value but found '\9 '.  Error in parsing value for 'background-color'.  Declaration dropped. bootstrap.css:6541
18:23:45.658 TypeError: $(...).on is not a function collapse.js:160
18:23:45.659 TypeError: $(...).on is not a function dropdown.js:149
18:23:45.661 TypeError: $(...).on is not a function bootstrap.js:163
18:23:45.662 The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. index.html

【问题讨论】：

我认为 bootstrap.js 应该在 transition.js 之上。还可以尝试将两个 CSS 导入移到所有内容之上
我在 jquery 之后添加了 bootstrap.js 但仍然没有运气。当我转到示例站点时，当我单击保管箱时它可以工作，所以仍然有问题
我会按 f12 并查看您的控制台中是否出现任何错误。可能是 .js 文件的路径错误，根本没有加载。
我使用了 firebug 并检查了访问日志，找到了它们（状态 200/304）.. 我总是在 chrome 中使用 cmd+r 使其查询服务器以检查文件是否更新而不是直接从浏览器返回缓存数据
发布你的 html 来构建带有下拉菜单的导航栏

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

尝试使用引导程序提供的 CDN 链接而不是您的导入来确定是您的标记导致问题还是您的 JS 导入。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">


<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

另外，请仔细检查您的导航栏 html 标记是否正确。下拉菜单是另一个嵌入在构成导航栏的更高级别 ul/li 中的 UL。

最后，您的<html> 标签看起来像<html，这会导致问题。还要放入适当的文档类型和元视口

<!DOCTYPE html>
<html>
  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    ... rest of your code

【讨论】：

嗯，我删除了所有导入并用您的代码替换它们，但没有任何变化。我将使用我正在使用的代码更新第一篇文章。
除了下拉菜单不起作用之外，您的页面本身是否正确呈现？你能附上导航栏的截图吗
是的，它正在正确呈现。我在第一篇文章中附上了截图
您的开始标签缺少结束括号...这是粘贴错误还是实际问题？在我关于 html 标签、文档类型和元视口的回答中查看我更新的 cmets。
这不是粘贴问题，我添加了结束括号和文档类型，但仍然没有变化。通常我会添加 doctype 并有适当的缩进，但因为它只是一个测试文件，以便更容易隔离问题，所以我放弃了它，因为我并不重要。

【解决方案2】：

我终于让它工作了。这是 dropdown.js 文件和另一个 javascript 文件（可能是 bootstrap.js）之间的冲突。当我删除 dropdown.js 时，下拉菜单正常工作。文档没有说您需要 dropdown.js 才能使导航栏正常工作，但如果您想要在网站上的某个位置使用单独的下拉菜单，那么您的导航栏下拉菜单将停止工作，因为您似乎不能同时拥有 bootstrap.js 和 dropdown.js同时导入有点奇怪，因为无论如何你总是需要 bootstrap.js ..从我发现的情况来看，当导入两个下拉菜单时，没有任何警告消息就被禁用了..有些地方说 bootstrap 已经包含下拉菜单的功能但我不确定..这也很有趣Bootstrap Dropdown not working - Dropdown doesn't toggle

在 bootstrap.js 中，我现在看到他们为他们拥有的所有 javascript 实现了功能，我在文档中没有看到他们已经这样做了，但如果你尝试，并非所有文件似乎都是冲突的单独导入。

【讨论】：