我有一个Twitter Bootstrap下拉菜单.正如所有Twitter Bootstrap用户都知道的那样,下拉菜单会在点击时关闭(甚至在其中单击).
为了避免这种情况,我可以在下拉菜单上轻松附加一个click事件处理程序,只需添加着名的event.stopPropagation().
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-list-alt"></i> Menu item 1
<span class="fa fa-chevron-down pull-right"></span>
</a>
<ul class="dropdown-menu mega-dropdown-menu">
<li>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel"></li>
<li class="active" data-slide-to="1" data-target="#carousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="" class="img-rounded" src="img1.jpg">
</div>
<div class="item active">
<img alt="" class="img-rounded" src="img2.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel"
class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel"
class="right carousel-control"> …我正在使用Bootstrap为我的网站创建一个下拉列表,但我遇到了一些问题.
在我的网站上,如果点击"选择人群",将出现弹出窗口(仅供参考:单击"提交"将显示其中的内容).当我点击它内部时,它总是关闭.我怎么能阻止它这样做？我只希望它在场外点击时关闭.
这是我使用的代码:
CSS:
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
HTML:
<div class="dropdown">
<button data-toggle="dropdown" id="submitButton" type="button" id="pops" >Select Populations</button>
<ul id="popupDropDown" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
</ul>
</div>
我试图将复选框放在bootstrap下拉列表中.我不希望下拉列表在点击时关闭,但如果他们点击网站上的其他位置,我仍然希望它关闭.我仍然想在下拉列表中点击其他javascript操作.我有一个与我想要的完全相反的例子.此示例关闭单击下拉菜单,但在从下拉区域外部单击时保持打开状态.
$(function () {
$('.dropdown.keep-open').on({
"shown.bs.dropdown": function() {
$(this).data('closable', false);
},
"click": function() {
$(this).data('closable', true);
},
"hide.bs.dropdown": function() {
return $(this).data('closable');
}
});
});