引导程序下拉不能关闭点击外部

Question

在我的应用程序中，我添加了关闭按钮端引导程序下拉列表。 点击那个关闭按钮我必须关闭下拉菜单。 这是工作正常，但是当我点击以外的下拉任何地方，下拉不打烊 这里是小提琴：goo.gl/3RAkBw

任何一个可以告诉我，我怎么能收

Answer 1

你可以试试这个：

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

Answer 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(); 
    }); 

Answer 3

只需使用下面的jQuery代码

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

或使用

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

}）;