ブートストラップで要素の内部をクリックするとトグル機能を無効にする方法

Question

jqueryでブートストラップを使用しています。 ドロップダウンメニューにログインフォームが表示されますが、フォーム内をクリックすると閉じます。

これは私のコードです：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ツリーをバブルアップからのイベントを防ぎます。それは少しdifeers becouse

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

私はあなたのcodeplyから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>