我研究了stackoverflow,以使登录表单的下拉按钮在完成表单时保持打开状态。现在,只要您尝试输入,登录表单就会关闭。这是我的代码:
<div class="top-nav">
<div class="btn-group pull-right dropdown-toggle"> <a class="btn btn-login" href="#"><i class="icon-user icon-white"></i> Login</a> <a class="btn btn-login dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<form class="form-horizontal dropdown-menu">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox">
Remember me </label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
在我的代码末尾,就在 body 标记之前,我输入了这个脚本:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script language="javascript">
$('.dropdown-toggle').dropdown();
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
</script>