在我的应用程序中,我已经在bootstrap下拉列表旁边添加了关闭按钮。点击该关闭按钮时,我必须关闭该下拉菜单。这个功能是正常工作的,但是当我在下拉菜单以外的任何地方点击时,下拉菜单都没有关闭。以下是Fiddle地址:
goo.gl/3RAkBw
请问有什么方法可以关闭它吗?goo.gl/3RAkBw
请问有什么方法可以关闭它吗?$(document).on('click',function(){
$('#layers').hide();
})
$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
var $target = $( event.currentTarget );
$target.closest( '.btn-group' )
.find( '[data-bind="label"]' ).text( $target.text() )
.end()
.children( '.dropdown-toggle' ).dropdown( 'toggle' );
return false;
});
$(window).on('click', function () {
$( '#layers' ).css( 'display','none' );
});
.btn-input {
display: block;
}
.btn-input .btn.form-control {
text-align: left;
}
.btn-input .btn.form-control span:first-child {
left: 10px;
overflow: hidden;
position: absolute;
right: 25px;
}
.btn-input .btn.form-control .caret {
margin-top: -1px;
position: absolute;
right: 10px;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<br/><br/>
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button onclick="$('#layers').toggle();" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul id="layers" class="dropdown-menu" role="menu">
<span><img class="close_img dropdown-toggle" onclick="$('#layers').toggle();" data-toggle="dropdown" src="https://www.eonenergy.com/images/icons/close.gif" alt="CloseWindow" title="Close" style="margin-top:5px;margin-right:5px" /></span>
<li><a href="#">Item 1</a></li>
<li><a href="#">Another item</a></li>
<li><a href="#">This is a longer item that will not fit properly</a></li>
</ul>
</div>
</div>
</div>
<br/><br/>
$(window).on('click', function () {
$( '#layers' ).css( 'display','none' ); //$( '#layers' ).hide();
});
$( window ).on( 'click', function( event ) {
.. 当单击窗口时,您必须隐藏下拉菜单 ..并且在此 fiddle 中,在窗口和特定的下拉菜单 li 上设置 css..这就是为什么它没有起作用的原因.. - Dhara只需使用以下jQuery代码
$(document).click( function () {
$("#layers").css("display", "");
});
或者使用
$(document).click( function () {
$("#layers").toggle();
});
$(document).on('click',function(){
$('#user-menu').removeClass('show');
})