Как закрыть окно выпадающего меню при нажатии кнопки?

Question

У меня есть раскрывающееся меню бутстрапа, которое я открываю, и я оставил его открытым, пока я работаю с сеткой, которую я разместил внутри нее. Я могу закрыть раскрывающееся меню, когда я нажимаю на выпадающую область, но я хочу закрыть его на событии нажатия кнопки ..

Вот мой HTML для выпадающего меню

<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> 

как вы можете видеть на событии OnClick в раскрывающемся меню, он держит его открытым. Так что я хотел бы сделать, это закрыть его на событии клика btnFilter. Любые идеи?

Answer 1

Вы можете использовать функцию toggle на .dropdown, который имеет кнопку внутри:

$('#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>