twitter-bootstrap Twitter 引导程序导航栏下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14072013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap navbar dropdown
提问by Pio
I am having some problems making twitter bootstrap drop-down navbar work. I ran through numerous tutorials and if I copy the code from there it doesn't work for me. In the console I get the following error
我在使 twitter bootstrap 下拉导航栏工作时遇到了一些问题。我浏览了许多教程，如果我从那里复制代码，它对我不起作用。在控制台中，我收到以下错误
TypeError: $ is undefined
var old = $.fn.dropdown
Here is my code:
这是我的代码：
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<!--Body content-->
<div class="navbar">
<div class="navbar-inner">
<ul id="tab" class="nav">
<li class="active"><a href="#Tab1" data-toggle="tab">Recent</a></li>
<li><a href="#Tab2" data-toggle="tab">Top</a></li>
<li><a href="#Tab3" data-toggle="tab">Near you</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Filters <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Filter1</a></li>
<li><a href="#">Filter2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="span4">
<!--Sidebar content-->
</div>
</div>
</div>
And here are my includes - they load without problem:
这是我的包含 - 它们加载没有问题：
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="bootstrap/js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
The page loads up, but when I click on the Filters menu item, it throws the above mentioned exception and nothing happens.
该页面已加载，但是当我单击“过滤器”菜单项时，它会引发上述异常并且没有任何反应。
回答by ppetrid
You must change the order javascripts are included. JQuery must come before bootstrap.
您必须更改包含 javascripts 的顺序。JQuery 必须在引导程序之前出现。
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-dropdown.js"></script>
EDIT, the why: Javascript is executed as soon as it gets loaded. At the time bootstrap-dropdown.js is being parsed, jQuery should have been already loaded. That way jQuery functionality will be available to bootstrap-dropdown.
编辑，原因：Javascript 一加载就执行。在解析 bootstrap-dropdown.js 时，jQuery 应该已经加载。这样 jQuery 功能将可用于 bootstrap-dropdown。
