Question

我正在使用最新的Bootstrap 3，我有一个名为“Login”的按钮，它会在单击时显示登录下拉列表。到现在为止还挺好。一切正常。唯一的问题是，在单击表单字段后，整个表单将消失...由于按钮下拉关闭。我读到这是因为'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()不是必需的。

Answer 2

到目前为止我还没有使用Bootstrap组件，但是如果用 e.preventDefault（）替换 e.stopPropagation（）会发生什么。

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

2 个答案: