버튼 클릭시 부트 스트랩 드롭 다운 메뉴를 닫는 방법?

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>