2016-10-01 70 views
1

我有一個引導下拉菜單,我打開並保持打開狀態,同時我使用放置在其中的網格進行工作,當單擊下拉區域外部時可以關閉下拉菜單,但是我想關閉它上一個按鈕單擊事件..如何關閉按鈕單擊的引導程序下拉菜單?

這裏是我的下拉

<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,你可以在下拉菜單的onClick事件看,它保持打開狀態。所以我想要做的就是關閉它在btnFilter點擊事件上。 任何想法的?

回答

5

您可以使用具有內按鈕.dropdowntoggle功能:

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

+0

這個工作,它關閉後,但它不會再次打開。同樣的事情發生在你的片段中。任何想法會導致什麼?它會與ul上的onClick事件有關嗎? – Chris

+0

對不起,我沒有注意到。回答更新:)現在它應該工作。 – Dekel

+0

完美的作品,謝謝先生:) – Chris