Twitter引导程序淹没按钮与登录表单(形式不保持打开)

时间:2012-12-24 20:26:44

标签: forms drop-down-menu login twitter-bootstrap

我已经研究了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>

1 个答案:

答案 0 :(得分:0)

我能够使用您的代码重现该问题。从JavaScript中删除.find('form')修复了问题。