[英]Bootstrap Login Dropdown “click” not working
I've researched this problem and I still cannot get it to work, when I click the form it closes because of boostrap-dropdown.js. 我研究了这个问题,但是当我单击由于boostrap-dropdown.js而关闭的表单时,仍然无法使它正常工作。 However, I am following this guide to create a login dropbdown on my navbar using bootstrap: Guide , and they have included JS to stop the form from closing, but it is not working for me.
但是,我正在按照本指南使用bootstrap: Guide在我的导航栏上创建登录下拉列表,并且它们包含了JS来阻止表单关闭,但是对我来说不起作用。
Here is my code: 这是我的代码:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><!-- Collapsable nav bar -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Your site name for the upper left corner of the site -->
<a class="brand"><img name="" src="bglogo.png" alt=""></a>
<!-- Start of the nav bar content -->
<div class="nav-collapse"><!-- Other nav bar content -->
<!-- The drop down menu -->
<ul class="nav pull-right">
<li><a href="/users/sign_up">Sign Up</a></li>
<li class="divider-vertical"></li>
<li class="drop down">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<!-- Login form here -->
<form action="Checklogin.php" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
and my Javascript that I am inserting in before the close body tag: 以及我要在close body标签之前插入的Javascript:
<!-- Placed at the end of the document so the pages load faster -->
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
<script>
$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});</script>
Thanks! 谢谢!
Edit: The more I think about it, the more I realize it HAS to be a Javscript issue, because the form and the navbar are fine, but when I "click" the dropdown it closes. 编辑:我想得越多,我就越意识到这是一个Javscript问题,因为表单和导航栏都很好,但是当我“单击”下拉列表时,它将关闭。
You are referencing the wrong container in your js, .dropdown
, its supposed to be .dropdown-menu
; 您在js中引用了错误的容器
.dropdown
,它应该是.dropdown-menu
; try this: 尝试这个:
JS JS
$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
e.stopPropagation();
});
Quick tip: you can minimize the number of js calls in your page by using the bootstrap.js pack of scripts instead of loading them one by one. 快速提示:您可以使用bootstrap.js脚本包来最大限度地减少页面中的js调用次数,而不必一一加载。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.