Html Bootstrap 下拉菜单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12458522/
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 not working
提问by hjuster
I can't make bootstrap dropdown to work. Here is my html for nav:
我无法使引导下拉菜单正常工作。这是我的导航 html：
<ul class='nav'>
<li class='active'>Home</li>
<li class='dropdown'>
<a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">asds</a></li>
<li class="divider"></li>
</ul>
</li>
<li>Payday loans</li>
<li>About</li>
<li>Contact</li>
</ul>
And here are the scripts:
这里是脚本：
<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
$(document).ready(function(){
$('.dropdown-toggle').dropdown()
});
</script>
What am I doing wrong? Thanks for your answers!
我究竟做错了什么？感谢您的回答！
采纳答案by gaurang171
Working demo: http://codebins.com/bin/4ldqp73
工作演示：http: //codebins.com/bin/4ldqp73
try this
尝试这个
<ul class='nav'>
<li class='active'>Home</li>
<li>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">asds</a></li>
<li class="divider"></li>
</ul>
</div>
</li>
<li>Payday loans</li>
<li>About</li>
<li>Contact</li>
</ul>
回答by Prince Ashitaka
I had the same problem. After a couple of hours of trouble shooting found that,
我有同样的问题。经过几个小时的故障排除后发现，
I had
我有
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
instead of,
代替，
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
Hope this helps someone
希望这有助于某人
回答by kubilay
I had the same problem when I included the bootstrap.min.jstwice. Removed one of them and it began working.
当我包含bootstrap.min.js两次时，我遇到了同样的问题。删除其中之一，它开始工作。
回答by Fahrenheit
FYI: If you have bootstrap.js, you should notadd bootstrap-dropdown.js.
FYI：如果你有bootstrap.js，你应该不加引导，dropdown.js。
I'm unsure of the result with bootstrap.min.js.
我不确定 bootstrap.min.js 的结果。
回答by ??ssàma H??d
For your style you need to include the css files of bootstrap, generally just before </head>element
对于您的样式，您需要包含 bootstrap 的 css 文件，通常就在</head>元素之前
<link href="css/bootstrap.css" rel="stylesheet">
Next you'll need to include the js files, it's recommended to include them at the end of the document, generally before the </body>so pages load faster.
接下来您需要包含 js 文件，建议将它们包含在文档的末尾，通常在</body>so 页面加载速度更快之前。
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
回答by Shevon Silva
Add following lines within the body tags.
在 body 标签中添加以下几行。
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files
as needed -->
<script src="js/bootstrap.min.js"></script>
回答by Martin
you have to import this files into the <head></head>of your html.
您必须将此文件导入到<head></head>您的 html 中。
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
回答by Frankline
Have you included jquery.js?
你包括了 jquery.js吗？
Also, compare this line of code with yours:
另外，将这行代码与您的代码进行比较：
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>
See this version that works ok.
看到这个版本可以正常工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap dropdown</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<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">
<h1>Dropdown Example</h1>
</div>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
回答by David Liao
Both bootstrap and jquery must be included:
bootstrap 和 jquery 都必须包括在内：
<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>
<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>
NOTE: jquery-x.x.x.min.js version must be version 2.x.x!!!
注意：jquery-xxxmin.js 版本必须是 2.xx 版本！！！
回答by Atdhe Kurteshi
I figured it out and the simplest way to do this ist just copy and past the CDN of bootstrap link that can be found in https://www.bootstrapcdn.com/and the Jquery CDN Scripts that can be found here https://code.jquery.com/and after you copy the links, the bootstrap links paste on the head of HTML and the Jquery Script paste in body of HTML like the example below:
我想出来了，最简单的方法就是复制并通过引导程序链接的 CDN，可以在https://www.bootstrapcdn.com/和 Jquery CDN 脚本中找到，可以在这里找到https:// code.jquery.com/复制链接后，引导程序链接粘贴在 HTML 的头部，Jquery 脚本粘贴在 HTML 的正文中，如下例所示：
<!DOCTYPE html>
<html>
<head>
<title>Purrfect Match Landing Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="griddemo.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</body>
</html>
For me works perfect hope it works also for you :)
对我来说很完美，希望它也适合你:)
