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

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>