单击任何输入框后关闭下拉菜单
Dropdown menu closing after clicking on any input box
我创建了一个下拉菜单,在其中我创建了搜索条件的表单。现在,每当我点击任何输入框,菜单就会关闭。有什么办法解决吗?
这是我的html代码:
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Search<b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row">
<center>Search Criteria</center>
<hr>
<li class="col-sm-3">
<ul>
<li>Profile ID</li>
<li>
<input type="text">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Name</li>
<li>
<input type="text">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Age</li>
<li>
<input type="text" size="5"> to
<input type="text" size="5">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Date of Birth</li>
<li>
<input type="date">
</li>
</ul>
</li>
</ul>
</li>
和我的css代码:
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
@media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
尝试使用e.stopPropagation():
$(document).on('click', '.dropdown', function (e) {
e.stopPropagation();
});
Bootply演示
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- jQuery导航下拉菜单未显示..任何想法
- HTML 下拉菜单不显示任何内容
- 当单击该下拉菜单之外的任何区域时,如何使用javascript/jquery隐藏该下拉菜单
- 如何隐藏下拉菜单,如果我点击身体任何元素
- 下拉菜单关闭时,我点击它(任何地方)
- 下拉菜单不显示任何值
- 当单击页面上的其他任何地方时,使下拉菜单返回
- 当其中任何一个下拉菜单发生变化时,对它们的内容进行求和
- jQuery:切换其他下拉菜单时,任何被切换
- 使下拉菜单消失时,点击任何东西,但菜单
- 单击任何输入框后关闭下拉菜单
- Bootstrap 3下拉菜单在单击下拉菜单中的任何内容时保持显示