twitter-bootstrap Bootstrap 3 下拉菜单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19644637/
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 3 dropdown not working
提问by insidelulz
I don't really understand, when I launch my html page on local the dropdown menu doesn't work.
我不太明白，当我在本地启动我的 html 页面时，下拉菜单不起作用。
I tried to copy/paste my html code on bootply and its work! Incredible ...
我试图在 bootply 和它的工作上复制/粘贴我的 html 代码！极好的 ...
Any idea ?
任何的想法 ？
I don't want to include all js file, just necessary file for dropdown (dropdown.js)
我不想包含所有的 js 文件，只是下拉的必要文件（dropdown.js）
I didn't really know what I should try ...
我真的不知道我应该尝试什么......
If any one can help me It will really appreciate it.
如果有人可以帮助我，我将不胜感激。
Thank you
谢谢
回答by Martin Preusse
You have to include jQuery 1.X or 2.X when you put this in your own HTML page (Bootstrap versions before 3.3.7 are not compatible with JQuery 3.X). Make sure to include jquery.js beforebootstrap.js (or dropdown.js). Usually you do this just before the </body>tag.
将 jQuery 1.X 或 2.X 放入自己的 HTML 页面时，必须包含 jQuery 1.X 或 2.X（3.3.7 之前的 Bootstrap 版本与 JQuery 3.X 不兼容）。确保在bootstrap.js（或 dropdown.js）之前包含 jquery.js 。通常，您在</body>标记之前执行此操作。
This is a complete working example, Bootstrap and jQuery are loaded from external CDNs:
这是一个完整的工作示例，Bootstrap 和 jQuery 是从外部 CDN 加载的：
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-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>
</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>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- include javascript, jQuery FIRST -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Put this in a .html file and open it in your browser.
把它放在一个 .html 文件中，然后在浏览器中打开它。
回答by Ameen
The way i got it working First
我让它工作的方式首先
npm install --save bootstrap@3
npm install --save bootstrap@3
this will create all bootsrap dirs for css and js
这将为 css 和 js 创建所有 bootsrap 目录
then i added globally in my project /projectname/angular.json
然后我在我的项目 /projectname/angular.json 中全局添加
Added these lines to add css and js
添加这些行以添加 css 和 js
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap/dist/js/npm.js"
]
make sure your index.html file does not directly import any conflicting .js files
确保您的 index.html 文件不会直接导入任何冲突的 .js 文件
回答by DanC
at least for me, all of the above did not fix the problem. an upgrade to v3.2.0 of bootstrap did the trick. here is a self-containing sample code. simply copy-paste to a test html file and it should work (all js and css are cdn-loaded):
至少对我来说，以上所有内容都没有解决问题。升级到 v3.2.0 的 bootstrap 成功了。这是一个自包含的示例代码。简单地复制粘贴到一个测试 html 文件，它应该可以工作（所有 js 和 css 都是 cdn 加载的）：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"> </script>
<link rel="stylesheet" href="//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>
</head>
<body>
<div class="btn-group">
<button id="myid" type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="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>
</div>
</body>
</html>
