[英]Drop down menu collapsing in css
我正在使用來自的代碼段
http://bootsnipp.com/snippets/featured/advanced-dropdown-search
我對代碼進行了以下更改
<div class="col-md-12">
<form action="./" method="POST" autocomplete="on">
<div class="input-group" id="adv-search">
<input type="text" class="form-control"
placeholder="Search for snippets" id="mainForm" name="searchBox" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
<span class="dropdown-menu dropdown-menu-right" role="menu">
<div class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label> <select
class="form-control" name="docType">
<option value="0" selected>All Sources</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author / Modifier</label> <input
class="form-control" type="text" name="authorName" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label> <input
class="form-control" type="text" name="words" />
</div>
<!-- <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> -->
</div>
</span>
</div>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</form>
</div>
將表單標簽移至上方后,只需單擊下拉菜單中的任意位置即可關閉下拉菜單。
有人可以解釋為什么嗎?
我嘗試了很多更改,但對我沒有任何幫助。
嘗試刪除data-toggle="dropdown"
並使用jquery .toggleClass('open');
和.removeClass('open');
open/close
下拉菜單, (然后單擊下拉菜單nenu,只需在其外部單擊即可) :
打開下拉菜單:
$('.dropdown-lg .btn').on('click', function (event) {
$(this).parent().toggleClass('open');
});
關閉下拉菜單(單擊主體時):
$('body').on('click', function (e) {
if (!$('.dropdown-lg').is(e.target)
&& $('.dropdown-lg').has(e.target).length === 0
&& $('.open').has(e.target).length === 0
) {
$('.dropdown-lg').removeClass('open');
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.