javascript - 从按钮 Bootstrap 登录表单 div - 单击表单后不保持打开状态

Question

我使用的是最新的 Bootstrap 3，我有一个名为“登录”的按钮，单击该按钮会显示一个用于登录的下拉列表。到目前为止，一切都很好。一切正常。唯一的问题是，单击表单字段后，整个表单消失了……由于按钮下拉列表关闭。我读到它是由于“e.StopPropagation”javascript 引起的，但我相信正确地在 HTML 页面的末尾添加了那部分，但它仍然关闭。知道我做错了什么吗？

代码如下:

 <div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     Login <span class="caret"></span>
   </button>
   <ul class="dropdown-menu pull-right toprightlogin" role="menu">
     <li>

        <form class="form-horizontal" role="form">
   <div class="form-group">
     <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
     <div class="col-lg-10">
       <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
     </div>
   </div>
   <div class="form-group">
     <label for="inputPassword1" class="col-lg-2 control-label">Password</label>
     <div class="col-lg-10">
       <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
     </div>
   </div>
   <div class="form-group">
     <div class="col-lg-offset-2 col-lg-10">
       <button type="submit" class="btn btn-default">Sign in</button>
     </div>
   </div>
 </form>



        </li>
   </ul>
 </div>

和 javascript:

        <script>
     $(function() {
   // Setup drop down menu
   $('.dropdown-toggle').dropdown();

   // Fix input element click problem
   $('.dropdown input, .dropdown label').click(function(e) {
     e.stopPropagation();
   });
 });
        </script>

Answer 1

改为这样做

$(function() {
    // Fix input element click problem
    $('.btn-group input').click(function(e) {
        e.stopPropagation();
    });
});

除了不同的选择器，$('.dropdown-toggle').dropdown() 不是必需的。