[英]Bootstrap dropdown not closing on clicking outside
在我的應用程序中,我添加了關閉按鈕側引導下拉菜單。 單擊該關閉按鈕,我必須關閉該下拉菜單。 這工作正常,但是當我點擊下拉菜單外的任何地方時,下拉菜單沒有關閉這里是小提琴: 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();
});
只需使用下面的 jquery 代碼
$(document).click( function () {
$("#layers").css("display", "");
});
或使用
$(document).click( function () {
$("#layers").toggle();
});
單擊下拉菜單時會添加“顯示”類,以便隱藏下拉菜單,您必須將其刪除:
$(document).on('click',function(){
$('#user-menu').removeClass('show');
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.