twitter-bootstrap Bootstrap 下拉菜单不起作用（单击时不下拉）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18345714/
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
Bootstrap dropdown menu not working (not dropping down when clicked)
提问by user2274191
I'm trying to get to grips with bootstrap and having little success. I am just trying to get a local version of this template working
我试图掌握引导程序，但收效甚微。我只是想让这个模板的本地版本正常工作
http://getbootstrap.com/examples/jumbotron/
http://getbootstrap.com/examples/jumbotron/
I have copied the html directly into a html page and referenced the css and js files in the same order as the webpage only using copies from the latest download on my machine. However nothing happens when the arrow next to dropdown is clicked (i.e. no menu appears)
我已将 html 直接复制到 html 页面中，并以与网页相同的顺序引用了 css 和 js 文件，仅使用我机器上最新下载的副本。但是，当单击下拉菜单旁边的箭头时没有任何反应（即没有菜单出现）
I have tried to reproduce the code in a jsfiddle but that is even worse and doesnt display the menu properly at all. http://jsfiddle.net/andieje/kRX6n/
我试图在 jsfiddle 中重现代码，但这更糟，根本无法正确显示菜单。http://jsfiddle.net/andieje/kRX6n/
Here is my page's output. I also included the dropdown js too
这是我页面的输出。我也包括下拉js
<!DOCTYPE html>
<html>
<head><title>
Untitled Page
</title><link href="styles/bootstrap.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="JavaScript/html5shiv.js"></script>
<script src="JavaScript/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<script type="text/javascript" src="JavaScript/jquery.js" />
<script type="text/javascript" src="JavaScript/bootstrap-min.js" />
<script type="text/javascript" src="JavaScript/bootstrap-dropdown.js" />
</body>
</html>
I also tried adding this code but to no avail
我也尝试添加此代码但无济于事
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
回答by ashishSober
i faced the same problem , the solution worked for me , hope it will work for you too.
我遇到了同样的问题，该解决方案对我有用，希望它也对你有用。
<script src="content/js/jquery.min.js"></script>
<script src="content/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Please include the "jquery.min.js" file before "bootstrap.min.js" file, if you shuffle the order it will not work.
请在“bootstrap.min.js”文件之前包含“jquery.min.js”文件，如果您打乱顺序，它将不起作用。
回答by Faisal Khan Samrat
Just Remove the type="text/javascript"
只需删除 type="text/javascript"
<script src="JavaScript/jquery.js" />
<script src="JavaScript/bootstrap-min.js" />
Here is the update - http://jsfiddle.net/andieje/kRX6n/
回答by Atdhe Kurteshi
Adding this script to my code fixed the dropdown menu.
将此脚本添加到我的代码中修复了下拉菜单。
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
回答by Atdhe Kurteshi
Just add both these files after opening of body tag. Keep in mind 'Only after Body tag' any where after body tag. If you add below mentioned files inside body tag then your problems would still be unresolved.
只需在打开 body 标签后添加这两个文件。请记住“仅在正文标记之后”在正文标记之后的任何位置。如果您在 body 标签中添加以下提到的文件，那么您的问题仍然无法解决。
So paste them after or before close of body tag... This works 100%. I've tested and got it working!
所以在 body 标签关闭之后或之前粘贴它们......这 100% 有效。我已经测试过并让它工作了！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
回答by Waqar Detho
I had the same issue I remove the following script and it worked for me.
我有同样的问题，我删除了以下脚本，它对我有用。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
