ボタンをクリックすると、ブートストラップのドロップダウンメニューが閉じますか？

Question

ブートストラップのドロップダウンメニューがあり、その中に配置したグリッドで作業している間に開いたままにしておくと、ドロップダウンエリアの外をクリックするとドロップダウンできますが、閉じますあなたはそれが開いて、それを維持し、ドロップダウンメニューのonClickイベントで見ることができるようにボタンのクリックイベントに..ここで

ドロップダウン

<div class="dropdown"> 
    <button class="btn dropdown-toggle col-md-3" type="button" data-toggle="dropdown"> 
     Select Category 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu col-md-7" onClick="event.stopPropagation();"> 
     <div id="MaterialGridList" style="height:440px;"></div> 
     <button type="button" id="btnFilter" class="btn btn-sm btn-success">Filter</button> 
    </ul> 
</div> 

のための私のhtmlです。だから私がしたいのは、btnFilterクリックイベントで閉じることです。 アイデアはありますか？

Answer 1

あなたは内部のボタンがあり.dropdownにtoggle機能を使用することができます。これは動作します

$('#btnFilter').click(function() { 
 
    $(this).parents('.dropdown').find('button.dropdown-toggle').dropdown('toggle') 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="dropdown"> 
 
    <button class="btn dropdown-toggle col-md-3" type="button" data-toggle="dropdown"> 
 
     Select Category 
 
     <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu col-md-7" onClick="event.stopPropagation();"> 
 
     <div id="MaterialGridList" style="height:440px;"></div> 
 
     <button type="button" id="btnFilter" class="btn btn-sm btn-success">Filter</button> 
 
    </ul> 
 
</div>