Question

我正在使用带jquery的bootstrap。它在下拉菜单中显示一个登录表单，但是当您单击表单内部时它会关闭。

这是我的代码：http://www.codeply.com/go/dvPYU6GHpo

$('#profili').click(function() {
  $('#prof').addClass("open");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<ul class="nav navbar-nav pull-right" style="width: 100%;">

  <li style="height: 57px;  float: right">
    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="padding-left: 10px; padding-right: 5px; padding-top: 13px;">
      <img src="https://www.materialui.co/materialIcons/navigation/arrow_drop_down_grey_192x192.png" alt="">
    </a>

    <div class="dropdown-menu dropdown-usermenu pull-right" style="width: 300px; height: 200px; padding-top: 10px;  padding-left: 10px;  padding-right: 10px;">

      <form action="" method="post" role="form">

        <div class="form-group">
          <input class="form-control" type="email" name="user_email" style="padding-left: 10px" minlength="6" maxlength="40" placeholder="Email &nbsp;*" required="">
        </div>
        <div class="form-group">
          <input class="form-control" type="password" name="user_password" style="padding-left: 10px" minlength="6" maxlength="20" placeholder="Password &nbsp;*" required="">
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" name="user_remember">
          </label>Remember Me
        </div>

        <div class="form-group">
          <input class="btn btn-primary btn-md" type="submit" name="login" value="Log In" style="margin-top: 0px; width: 80px">
          <a href="#" class="btn btn-primary btn-md" style="margin-top: 0px; width: 80px" value="Sign Up">Sign Up</a>
          <br> <a href="recover.php" style="margin-left: 20px;">Recover Password</a>
        </div>

      </form>

    </div>
  </li>
</ul>

如果用户在表单内单击，如何禁用关闭？

提前致谢！

Answer 1

尝试使用event.stopPropagation()：

防止事件冒泡DOM树，防止任何父处理程序被通知事件。

$('#profili form').click(function(e){
  e.stopPropagation();
});

我已经从你的代码中复制了HTML代码，因为它有点差异。请检查结果：http://www.codeply.com/go/ewpVXkZWCy

$('#profili form').click(function(e) {
  e.stopPropagation();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<ul class="nav navbar-nav pull-right" style="width: 100%;">

  <li style="height: 57px; float: right" id="prof">
    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="padding-left: 10px; padding-right: 5px; padding-top: 13px;">
      <img src="https://www.materialui.co/materialIcons/navigation/arrow_drop_down_grey_192x192.png" alt="">
    </a>

    <div class="dropdown-menu dropdown-usermenu pull-right" style="width: 300px; height: 200px; padding-top: 10px;  padding-left: 10px;  padding-right: 10px;" id="profili">

      <form action="" method="post" role="form">

        <div class="form-group">
          <input class="form-control" type="email" name="user_email" style="padding-left: 10px" minlength="6" maxlength="40" placeholder="Email &nbsp;*" required="">
        </div>
        <div class="form-group">
          <input class="form-control" type="password" name="user_password" style="padding-left: 10px" minlength="6" maxlength="20" placeholder="Password &nbsp;*" required="">
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" name="user_remember">
          </label>Remember Me
        </div>

        <div class="form-group">
          <input class="btn btn-primary btn-md" type="submit" name="login" value="Log In" style="margin-top: 0px; width: 80px">
          <a href="#" class="btn btn-primary btn-md" style="margin-top: 0px; width: 80px" value="Sign Up">Sign Up</a>
          <br> <a href="recover.php" style="margin-left: 20px;">Recover Password</a>
        </div>

      </form>

    </div>
  </li>
</ul>

如何在引导程序中单击元素内部时禁用切换功能

1 个答案: