Javascript 引导导航栏下拉框不显示下拉菜单

我已经阅读了许多关于stackoverflow的线程，它们都是关于导航栏中的

下拉框

，但是没有一个对我的问题有帮助

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

navbar

示例：

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

我使用的代码与该站点上的代码完全相同，im包括以下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">

我还尝试用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提供的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

---

最后，您的

标记看起来像

我终于让它工作了。这是dropdown.js文件和另一个javascript文件（可能是bootstrap.js）之间的冲突。当我删除dropdown.js时，该下拉列表正常工作。文档中并没有说你需要dropdown.js来让navbar工作，但是如果你想在网站上的某个地方有一个单独的下拉菜单，那么你的navbar下拉菜单将停止工作，因为看起来你不能同时导入bootstrap.js和dropdown.js，这有点奇怪，因为你总是需要bootstrap.js无论如何从我发现的情况来看，当导入两个下拉列表时，没有任何警告信息。有些地方说引导已经包含了下拉功能，但我不确定。这也是一个有趣的阅读

在bootstrap.js中，我现在看到他们实现了所有Java脚本的功能，我在文档中没有看到他们这样做，但如果您尝试单独导入，并非所有文件都会发生冲突
 我假设bootstrap.js应该在transition.js之上。另外，尝试将两个CSS导入移到所有内容之上，我在jquery之后添加了bootstrap.js，但仍然没有成功。当我进入示例站点时，它在我点击dropbox框时起作用，因此仍然有一些错误。我会按f12键，看看您的控制台中是否有任何错误。可能是你的.js文件路径错误，根本没有加载。我使用了firebug并检查了访问日志，找到了它们（状态200/304）。。我总是在chrome中使用cmd+r来查询服务器以检查文件是否更新，而不是直接从浏览器返回缓存数据发布你的html，它使用itHmm中的下拉菜单构建导航栏，我删除了所有导入并用代码替换它们，但没有任何更改。我将用im使用的代码更新第一篇文章。除了下拉菜单不起作用外，您的页面本身是否正确呈现？你能包括导航栏的屏幕截图吗？是的，它被正确地渲染了。我在第一篇博文上贴了一张截图。你的开始标签缺少结尾括号。。。这是粘贴错误还是实际问题？请参阅我在回答中关于html标记、doctype和元视口的更新注释。这不是粘贴问题，我添加了结束括号和doctype，但仍然没有更改。通常我会添加doctype并有适当的缩进，但因为它只是一个测试文件，以便更容易地隔离问题，所以我放弃了它，因为我认为这并不重要。
<!-- 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>

<!DOCTYPE html>
<html>
  <head>

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

    ... rest of your code