我知道在Stack Overflow上有很多这样的问题,我看过它们,但我的下拉菜单仍无效。
这是我的代码:
<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>
它出了什么问题?
修改
因此,下拉菜单现在正在处理此问题的答案。但是,如果我包含那里提到的脚本,模态窗口将停止工作。当我评论这些条目时,它再次开始工作。
这是我的模态窗口的代码:
<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:
$('#myModal').on('hide',function(){
$('.nav > li > a.modal-open-li').removeClass('modal-open-li');
});
答案 0 :(得分:19)
对于仍然遇到此问题的人。我发现我将bootstrap js文件包括两次(我已经拆分了我的页眉,正文和页脚文件,并没有意识到我将它们都包含在页脚和页眉中。
可以帮助别人。
答案 1 :(得分:17)
我有类似的问题。 原因是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>
答案 2 :(得分:11)
检查js文件中是否包含此内容:$('.dropdown-toggle').dropdown();
使用此序列检查您是否有类似的内容:
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script type="text/javascript"> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script>
答案 3 :(得分:11)
在我的ready函数中添加这个为我解决了问题
$('.dropdown-toggle').dropdown();
答案 4 :(得分:9)
似乎在jsFiddle中正常工作,这是一个示例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
<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>
答案 5 :(得分:2)
对我来说,这是因为添加脚本的顺序不正确,应该是这样的:
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
答案 6 :(得分:0)
在我的情况下,问题出在jQuery的版本上。 在bootstrap.js v3.3.6
中Network Utility
注意:'Bootstrap \'的JavaScript需要jQuery 1.9.1或更高版本,但低于版本3'
我用jQuery-1.11.3.js替换了本地jQuery文件的代码,它开始工作。
希望它也适合你。
答案 7 :(得分:-1)
在我的情况下,我的下拉按钮上有一个组件,我花了很长时间才注意到。 Noob错误,但它可能会帮助某人。