Bootstrap 下拉菜单在点击外部时未关闭答案

【问题标题】：Bootstrap dropdown not closing on clicking outsideBootstrap 下拉菜单在点击外部时未关闭
【发布时间】：2017-02-12 13:33:15
【问题描述】：

在我的应用程序中，我添加了关闭按钮侧引导下拉菜单。单击该关闭按钮，我必须关闭该下拉列表。这工作正常，但是当我单击下拉菜单外的任何位置时，下拉菜单不会关闭这是小提琴：goo.gl/3RAkBw

谁能告诉我如何关闭

【问题讨论】：

小提琴链接丢失
jsfiddle.net/n66mj41v/1

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你可以试试这个：

$(document).on('click',function(){
    $('#layers').hide();
  })

【讨论】：

【解决方案2】：

   $( 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>&nbsp;<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();
   });

【讨论】：

我已经更新了小提琴，还是同样的问题jsfiddle.net/n66mj41v/11
@vaibhavshah 只写$( window ).on( 'click', function( event ) { .. 在单击窗口时，您必须隐藏下拉列表.. 在窗口和特定下拉列表中的这个小提琴中，您设置 css ..这就是它没有的原因不工作..

【解决方案3】：

只需使用下面的jquery代码

  $(document).click( function () {
   $("#layers").css("display", "");
  });

或使用

$(document).click( function () {
  $("#layers").toggle();

});

【讨论】：

【解决方案4】：

单击下拉菜单时会添加“显示”类，因此要隐藏下拉菜单，您必须将其删除：

$(document).on('click',function(){
    $('#user-menu').removeClass('show');
})

【讨论】：