Twitter Bootstrap下拉菜单不工作 [英] Twitter Bootstrap drop down menu not working
问题描述
我知道Stack Overflow上有很多问题,我已经看过他们,但是我的下拉菜单仍然无法使用。
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.
这是我的代码:
<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>
有什么问题?
strong> EDIT
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>
触发器的JavaScript:
And the JavaScript for the trigger:
$('#myModal').on('hide',function(){
$('.nav > li > a.modal-open-li').removeClass('modal-open-li');
});
推荐答案
似乎在jsFiddle中正常工作,这里是一个例子 http://jsfiddle.net/2hGuv/
Seems to work fine in jsFiddle, here is an example http://jsfiddle.net/2hGuv/
您必须记住导入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
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.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>
这篇关于Twitter Bootstrap下拉菜单不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!