私は最新の 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>