twitter-bootstrap Twitter Bootstrap 下拉菜单在任何浏览器中都不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15592158/
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 dropdown not working in any browser
提问by Cod1ngFree
I'm trying to do a dropdown menu and it seems to work in Jsfiddle. It seems that the javascript and css files are correctly loaded: http://imgur.com/YYiJS4p
我正在尝试做一个下拉菜单，它似乎在 Jsfiddle 中工作。似乎 javascript 和 css 文件已正确加载：http: //imgur.com/YYiJS4p
But it doesn't work in any of my browsers. I have tested it in Firefox 19.0.2, Google Chrome 25.0.1364.172 and Internet Explorer 9.0.2. Javascript is enabled and running.
但它在我的任何浏览器中都不起作用。我已经在 Firefox 19.0.2、Google Chrome 25.0.1364.172 和 Internet Explorer 9.0.2 中对其进行了测试。Javascript 已启用并正在运行。
Javascript is included before Bootstrap and bootstrap-dropdown.js is the only bootstrap file I have included, I mean that I have not included bootstrap.js.
Javascript 包含在 Bootstrap 之前，bootstrap-dropdown.js 是我包含的唯一引导文件，我的意思是我没有包含 bootstrap.js。
There is nothing in my error console.
我的错误控制台中没有任何内容。
Thanks in advance.
提前致谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="./css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">w3resource</a>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li class="divider"></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Componentes</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
</ul>
</div>
<!--/.well -->
</div>
<!--/span-->
<div class="span9">
<div class="row-fluid">
<div class="span4">
<h2>Canvas</h2>
<canvas id="myCanvas">Tu explorador no soporta canvas.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#AA0000";
ctx.fillRect(0,0,150,75);
</script>
</div>
<!--/span-->
<!--/row-->
</div>
<!--/span-->
</div>
<!--/row-->
</div>
<!--/.fluid-container-->
<!-- Placed at the end of the document so the pages load faster -->
<hr>
<footer>
<p>? Company 2013</p>
</footer>
<script src="./js/jquery-1.9.1.js"></script>
<script src="./js/bootstrap-dropdown.js"></script>
</body>
</html>
回答by Fede
This is what i'm loading:
这是我正在加载的内容：
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
I tried your code, loading a bootrasp I have in my machine and a the jquery from the site. and it works perfectly in FF, chrome and safari. I don't have a explorer to test it.
我尝试了您的代码，加载了我机器中的引导程序和来自该站点的 jquery。它在 FF、chrome 和 safari 中完美运行。我没有资源管理器来测试它。
回答by ddools
I was having a similar problem but found that i was loading both
我遇到了类似的问题，但发现我正在加载两者
bootstrap.min.js
bootstrap.min.js
and
和
bootstrap.dropdown.js
bootstrap.dropdown.js
this was causing a conflict in my code, you dont need to load both as the dropdown code is included in bootstrap.min.js
这导致我的代码发生冲突，您不需要同时加载两者，因为下拉代码包含在 bootstrap.min.js 中
回答by Tejasvi Hegde
"min" versions cause problem some times (I face issues with .min files occasionally with ASP.NET MVC)
“min”版本有时会导致问题（我在使用 ASP.NET MVC 时偶尔会遇到 .min 文件的问题）
I had same issue, tried with bootstrap.js and it works fine!
我有同样的问题，尝试使用 bootstrap.js，它工作正常！
Try same at your end.
最后尝试相同。
回答by cbeninati
You need to load bootstrap.min.js or bootstrap.js before you load bootstrap-dropdown.js. Bootstrap dropdown is a js plugin with a dependancy on the Bootstrap framework.
在加载 bootstrap-dropdown.js 之前，您需要加载 bootstrap.min.js 或 bootstrap.js。Bootstrap dropdown 是一个依赖于 Bootstrap 框架的 js 插件。
Your footer section would then look like this:
您的页脚部分将如下所示：
<footer>
<p>? Company 2013</p>
</footer>
<script src="./js/jquery-1.9.1.js"></script>
<script src="./js/bootstrap.js"></script>
<script src="./js/bootstrap-dropdown.js"></script>
You can customize your build of Bootstrap, then you don't have to separately include the bootstrap-dropdown.js—it will be loaded with Bootstrap.
您可以自定义 Bootstrap 的构建，然后您不必单独包含 bootstrap-dropdown.js——它将与 Bootstrap 一起加载。
Bootstrap custom download: http://twitter.github.com/bootstrap/customize.html
Bootstrap 自定义下载：http: //twitter.github.com/bootstrap/customize.html
