[英]Drop down menu collapsing in css
I was using the code snippet from 我正在使用来自的代码段
http://bootsnipp.com/snippets/featured/advanced-dropdown-search http://bootsnipp.com/snippets/featured/advanced-dropdown-search
I made the following changes to the code 我对代码进行了以下更改
<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>
After shifting the form tag above, the drop down menu is collapsing by just clicking anywhere on the dropdown. 将表单标签移至上方后,只需单击下拉菜单中的任意位置即可关闭下拉菜单。
Can someone please explain why? 有人可以解释为什么吗?
I tried doing a lot of changes but nothing worked for me. 我尝试了很多更改,但对我没有任何帮助。
https://jsfiddle.net/tj2y5ptp/ https://jsfiddle.net/tj2y5ptp/
Try removing data-toggle="dropdown"
and using jquery .toggleClass('open');
尝试删除data-toggle="dropdown"
并使用jquery .toggleClass('open');
and .removeClass('open');
和.removeClass('open');
to open/close
the dropdown menu, (then dropdown nenu will close just by clicking outside it (on Body) : open/close
下拉菜单, (然后单击下拉菜单nenu,只需在其外部单击即可) :
Open Dropdown: 打开下拉菜单:
$('.dropdown-lg .btn').on('click', function (event) {
$(this).parent().toggleClass('open');
});
Close Dropdown (when click on body): 关闭下拉菜单(单击主体时):
$('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');
}
});
See Updated fiddle , I hope it helps you, Thanks. 请参阅更新的小提琴 , 希望对您 有所 帮助,谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.