twitter-bootstrap Bootstrap 下拉菜单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17849152/
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 does not work
提问by calyxofheld
I'm starting to experiment with Bootstrap, but I'm not able to get the js dropdown function working the way it does in their doc.
我开始尝试使用 Bootstrap，但我无法让 js 下拉函数像在他们的文档中那样工作。
The code I'm using is source from one of the example dropdown nodes on their own site.
data-toggle="dropdown"is used on the links, and everything is as they say it should be. Anyone with a fresh set of eyes and more experience know whats going on? http://cssdeck.com/labs/pipw6ahd
我使用的代码来自他们自己站点上的示例下拉节点之一。
data-toggle="dropdown"用于链接，一切都如他们所说的那样。任何有新眼光和更多经验的人都知道发生了什么吗？http://cssdeck.com/labs/pipw6ahd
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown open">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script>
采纳答案by sulfureous
I think that you have a typo in the way you are including the bootstrap JS. Have a look at <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script>and notice that you have .jssfor the extension and also... the reason the link starts with // (double slash) is because it's missing the http:or https:protocol and they leave it off so you can add it.
我认为您在包含 bootstrap JS 的方式上有错别字。看看<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script>并注意您有.jss扩展名，还有...链接以//（双斜线）开头的原因是因为它缺少http:orhttps:协议，他们将其保留下来，因此您可以添加它。
You also forgot to include jQuery (it's a must for bootstrap's JS to work) and make sure you include it above the bootstrap JS or it won't work.
您还忘记包含 jQuery（这是引导程序的 JS 工作所必需的）并确保将其包含在引导程序 JS 之上，否则它将无法工作。
Here's a fiddle of the bare bone dropdown working with everything included.
这是包含所有内容的裸骨下拉列表的小提琴。
HTML
HTML
<div class="dropdown">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#" >Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
回答by isumi
I just had the same issue in Bootstrap 3.3.2, that dropdowns weren't working.
我刚刚在 Bootstrap 3.3.2 中遇到了同样的问题，下拉菜单不起作用。
I had included an older version of jquery (1.3) which doesn't work with bootstrap, I got this hint while looking at Firefox Webdeveloper Tools (F12) in Console and JS option enabled.
我已经包含了一个旧版本的 jquery (1.3)，它不能与引导程序一起使用，我在控制台中查看 Firefox Webdeveloper Tools (F12) 时得到了这个提示，并且启用了 JS 选项。
"Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher"
“错误：Bootstrap 的 JavaScript 需要 jQuery 1.9.1 或更高版本”
Removing this jquery include resolved my issue.
删除此 jquery 包括解决了我的问题。
回答by sangram parmar
here is working demo
这是工作演示
html
html
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
include css bootstrap.css
包括 css bootstrap.css
include js:: Jquery Libraryand bootstrap-dropdown.js
包括 js:: Jquery 库和bootstrap-dropdown.js
