twitter-bootstrap Twitter 引导下拉菜单不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17743194/
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?
提问by pynovice
I have looked into every threads in stackoverflow but couldn't solve my issue. Here's my head element:
我查看了 stackoverflow 中的每个线程，但无法解决我的问题。这是我的头部元素：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/custom.css" />
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap-responsive.css" />
<!-- Javascript imports-->
<script src="{{ STATIC_URL }}js/jquery.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap-carousel.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap-tab.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap-scrollspy.js" type="text/javascript"></script>
<title>Rank Analyzer</title>
<meta name="author" content="zurelsoft" />
<!-- Date: 2013-07-18 -->
</head>
I am calling dropdown in body like this:
我像这样在 body 中调用 dropdown：
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i>test</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
The dropdown is not showing up. Am I missing something?
下拉菜单不显示。我错过了什么吗？
回答by PaoloCargnin
Have you initialize the dropdown?
你有没有初始化下拉菜单？
$('.dropdown-toggle').dropdown()
the html structure of the dropdown menu
下拉菜单的html结构
<div class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
回答by LeftyX
It must work. Check this fiddle.
It seems to me that you're trying to include your bootstrap library twice.
它必须工作。检查这个小提琴。
在我看来，您试图两次包含引导库。
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
Why don't you just use this library: http://twitter.github.io/bootstrap/assets/js/bootstrap.jsor it's minified version: http://twitter.github.io/bootstrap/assets/js/bootstrap.min.jswhich would include all the components.
为什么不直接使用这个库：http: //twitter.github.io/bootstrap/assets/js/bootstrap.js或者它的缩小版本：http: //twitter.github.io/bootstrap/assets/js/ bootstrap.min.js将包含所有组件。
As an alternative you can include every single twitter bootstrap component (as they do in their page) but you cannot include the full package library.
作为替代方案，您可以包含每个 twitter bootstrap 组件（就像它们在他们的页面中所做的那样），但您不能包含完整的包库。
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>
回答by Sujit Y. Kulkarni
I placed jquery.js above bootstrap.jsand worked for me. If in case this helps..
我将jquery.js 放在 bootstrap.js 之上并对我来说有效。如果这有帮助..
回答by HarrisonC
Try this. You might want to restructure the code.
试试这个。您可能想要重构代码。
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="icon-user icon-white"> Test <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#">Make Admin</a></li>
</ul>
</div>
