twitter-bootstrap Twitter Bootstrap 下拉菜单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18945899/
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 drop down menu not working
提问by Anon
I know there are a lot of questions like this on Stack Overflow and I've looked at them but my dropdown menu still isn't working.
我知道 Stack Overflow 上有很多这样的问题，我已经看过了，但我的下拉菜单仍然不起作用。
Here's my code:
这是我的代码：
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav pull-left">
<li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a></li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">My Account<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
</li>
</div>
</div>
</div>
What's wrong with it?
它出什么问题了？
EDIT
编辑
So the drop down menu is now working with the answer posted to this question. However if I include the scripts mentioned over there the modal window stops working. And when I comment those entries it starts working again.
所以下拉菜单现在正在处理发布到这个问题的答案。但是，如果我包含那里提到的脚本，模态窗口将停止工作。当我评论这些条目时，它又开始工作了。
Here's the code for my modal window:
这是我的模态窗口的代码：
<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
X</button>
<h3 id="myModalLabel">
Enter your Credentials</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<a href="news.php" class="btn btn-primary">Login</a>
<a href="registration.php" class="btn btn-primary">Sign up</a>
</div>
</div>
</form>
</div>
</div>
And the JavaScript for the trigger:
触发器的 JavaScript：
$('#myModal').on('hide',function(){
$('.nav > li > a.modal-open-li').removeClass('modal-open-li');
});
采纳答案by Mortalus
Seems to work fine in jsFiddle, here is an example http://jsfiddle.net/2hGuv/
似乎在 jsFiddle 中工作正常，这里是一个例子http://jsfiddle.net/2hGuv/
You must remember to import the js file. here is the code with the following files imported: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.csshttp://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js
一定要记得导入js文件。这是导入以下文件的代码：http: //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js /bootstrap.min.js
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav pull-left">
<li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a>
</li>
<li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Account<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Login</a>
</li>
<li><a href="#">Register</a>
</li>
</ul>
</li>
</div>
</div>
</div>
回答by hammus
For anyone still experiencing this problem. I found that I was including the bootstrap js files twice (I had split my header, body and footer files and had not realised I was including them both in the footer and header.
对于仍然遇到此问题的任何人。我发现我两次包含 bootstrap js 文件（我已经拆分了页眉、正文和页脚文件，但没有意识到我将它们同时包含在页脚和页眉中。
Might help someone.
可能会帮助某人。
回答by waluga
I had a similar problem. And the cause was the wrong order of js files in head tag. Correct order is the jquery.min.js first than bootstrap.min.js
我有一个类似的问题。原因是 head 标签中 js 文件的顺序错误。正确的顺序是 jquery.min.js 优先于 bootstrap.min.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
回答by Undefined Behavior
Check if you have this in js files: $('.dropdown-toggle').dropdown();
检查js文件中是否有这个： $('.dropdown-toggle').dropdown();
Check if you have something like this with this sequence:
检查您是否有这样的序列：
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script type="text/javascript"> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script>
check this: Bootstrap drop-down menus and tabbable tabs on Docpad
回答by nissetuuta
Adding this in my ready function fixed the problem for me
在我的就绪函数中添加这个为我解决了这个问题
$('.dropdown-toggle').dropdown();
回答by Majid khalili
For mine it was because of the order of adding scripts was not right , it should be like this :
对我来说是因为添加脚本的顺序不对，应该是这样的：
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
回答by Pawan Kumar Thakur
In my case the problem was with version of jQuery. In bootstrap.js v3.3.6
就我而言，问题出在 jQuery 版本上。在 bootstrap.js v3.3.6 中
if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 2)) {
throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3')
}
Note: 'Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3'
注意：“Bootstrap\'s JavaScript 需要 jQuery 1.9.1 或更高版本，但低于版本 3”
I replaced the code of local jQuery file with jQuery-1.11.3.js and it starts working.
我用 jQuery-1.11.3.js 替换了本地 jQuery 文件的代码，它开始工作了。
Hope it will work for you as well.
希望它也适用于您。
回答by Marianna Spirandelli
In my case, there was a component over my drop down button, and it took too long for I take note. Noob error, but it may helps somebody.
就我而言，我的下拉按钮上方有一个组件，我花了很长时间才记下来。菜鸟错误，但它可能对某人有所帮助。
