jQuery 为什么这个引导下拉示例不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10766486/
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
Why doesn't this bootstrap dropdown example work?
提问by Loolooii
I'm just trying out the example in Bootstrap documentation, but it doesn't seem to work. I just get plain HTML. This is my code:
我只是在尝试 Bootstrap 文档中的示例，但它似乎不起作用。我只是得到纯 HTML。这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="bootstrap.css" type="text/css">
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$('.dropdown-toggle').dropdown();
</script>
<title>Dropdown</title>
</head>
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
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>
</body>
</html>
Does anyone see the problem? Thanks.
有没有人看到问题？谢谢。
回答by Andres Ilich
I see two problems with your markup.
我发现您的标记有两个问题。
First, you're including the bootstrap plugin "before" the jquery plugin. Jquery first, bootstrap plugins second.
首先，您在 jquery 插件“之前”包含引导插件。首先是 Jquery，其次是引导插件。
Second, you're using a DOCTYPE that is not supported by the bootstrap, you have to use HTML5's DOCTYPE:
其次，您使用的是引导程序不支持的 DOCTYPE，您必须使用 HTML5 的 DOCTYPE：
<!DOCTYPE html>
回答by Ulises
I think jquery.js should be imported before the bootstrap javascript file
我认为 jquery.js 应该在引导 javascript 文件之前导入
回答by David Rz Ayala
I dont see your <body>opening tag
我没有看到你的<body>开头标签
回答by Tats_innit
Working demohttp://jsfiddle.net/jyy96/2/orhttp://jsfiddle.net/jyy96/2/showor http://jsfiddle.net/jyy96/
工作演示http://jsfiddle.net/jyy96/2/或http://jsfiddle.net/jyy96/2/show或http://jsfiddle.net/jyy96/
EDIT9th July 2015 -Fixed here: http://jsfiddle.net/jyy96/792/or http://jsfiddle.net/jyy96/792/show/
编辑2015 年 7 月 9 日 -在这里修正：http: //jsfiddle.net/jyy96/792/或http://jsfiddle.net/jyy96/792/show/
==========================================
==========================================
Looks like bootstrapcdn is the popular choice, but for those wanting to use cdnjs.com, they have "all the files" and keep them up to date (version 2.0.0 through 2.1.1).
看起来 bootstrapcdn 是流行的选择，但对于那些想要使用 cdnjs.com 的人来说，他们拥有“所有文件”并保持最新（版本 2.0.0 到 2.1.1）。
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.css
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap-responsive.css
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap-responsive.min.css
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.js
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/img/glyphicons-halflings-white.png
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/img/glyphicons-halflings.png
==========================================
==========================================
Hope this help.
希望这有帮助。
script
脚本
<script type="text/javascript" src="/js/lib/bootstrap-2.0.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
Jquery code
查询代码
$('.dropdown-toggle').dropdown();
