CSS Twitter Bootstrap 2 下拉菜单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9334205/
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 2 drop down menu is not work
提问by mxpv
Good day! I'm trying to implement drop down menu from examples on my site. But it is not work (drop down menu is not showing at all). I included all necessary js and css files, markup is the same as in the docs.
再会！我正在尝试从我网站上的示例中实现下拉菜单。但它不起作用（下拉菜单根本没有显示）。我包含了所有必要的 js 和 css 文件，标记与文档中的相同。
Can you see what I'm doing wrong?
你能看出我做错了什么吗？
<link type="text/css" href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-dropdown.js"></script>
...
<body>
<div class="navbar .navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">
Brand
</a>
<ul class="nav">
<li class="dropdown">
<a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
Аккаунт
<b class="caret"></b>
</a>
<ul class="dropdown-menu" id="fat-menu">
<li><a>SubLink</a></li>
<li class="divider"></li>
<li><a>SubLink</a></li>
</ul>
</li>
</ul>
...
</div>
</div>
</div>
Many thanks.
非常感谢。
回答by mxpv
The problem was in missing js block in html file, required for a specific feature.
问题在于 html 文件中缺少特定功能所需的 js 块。
The missing code bit was:
丢失的代码位是：
$('.dropdown-toggle').dropdown()
回答by Andres Ilich
You're not properly binding your main nav link to your dropdown, try this:
您没有将主导航链接正确绑定到下拉列表，请尝试以下操作：
<ul class="nav">
<li class="dropdown" id="fat-menu"> /* notice the reference to your dropdown link #fat-menu */
<a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
Аккаунт
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a>SubLink</a></li>
<li class="divider"></li>
<li><a>SubLink</a></li>
</ul>
</li>
</ul>
回答by Piotr Pytlarz
I usually used to forget of one of these:
我通常会忘记其中之一：
- proper html
- linking to jquery.js and bootstrap-dropdown.js
- checking if i linked it properly (it seems redundant but it certainly helped me)
- calling the dropdown: $('.dropdown-toggle').dropdown()
- 正确的 html
- 链接到 jquery.js 和 bootstrap-dropdown.js
- 检查我是否正确链接它（这似乎是多余的，但它确实帮助了我）
- 调用下拉菜单： $('.dropdown-toggle').dropdown()
回答by SainathDK
I was facing the same problem. Commenting the link for bootstrap-dropdown.js resolved it. I only needed bootstrap.min.js
我面临同样的问题。评论 bootstrap-dropdown.js 的链接解决了它。我只需要 bootstrap.min.js
回答by Keith
I know this may seem silly, but when you view the source (via right-click), are the addresses of the JavaScript files correct? It's possible that {{ STATIC_URL }} isn't correct. Try copy and pasting the addresses from the source into the address bar. Make sure you actually see the content of the JavaScript files.
我知道这可能看起来很傻，但是当您查看源代码（通过右键单击）时，JavaScript 文件的地址是否正确？{{ STATIC_URL }} 可能不正确。尝试将地址从源复制并粘贴到地址栏中。确保您确实看到了 JavaScript 文件的内容。
回答by vimdude
That will happen if you override li somewhere in your css. For example, if you have an other stylesheet with content:
如果您在 css 中的某处覆盖 li，就会发生这种情况。例如，如果您有一个包含内容的其他样式表：
li {
list-style: none;
margin-bottom: 20px;
overflow: hidden;
padding-bottom: 25px;
position: relative;
}
It will not work. Make sure there is no conflict.
不起作用。确保没有冲突。
回答by devBen
Try to upgrade your jQuery library, it solved the same problem for me.
尝试升级您的 jQuery 库，它为我解决了同样的问题。
回答by Agadormis
Had the same issue on a .net project (drop down menu not showing at all), however offcial bootstrap samples worked fine. Upgrading jQuery library on my project from 1.6.1 to 1.8.2 solved the problem.
在 .net 项目中遇到了同样的问题（根本没有显示下拉菜单），但是官方引导程序示例运行良好。将我项目上的 jQuery 库从 1.6.1 升级到 1.8.2 解决了这个问题。
