2014-01-10 193 views
15

我需要通過JavaScript打開引導下拉菜單。 This answer建議添加和刪除open類,但是當我嘗試時,沒有任何反應。添加一個不同的類很好。 Bootstrap阻止我這樣做?用JS觸發引導下拉菜單

工作樣品JSFiddle

HTML

<input type="button" value="Add Classes" /> 
<div class="dropdown"> 
    <a data-toggle="dropdown" href="#">Dropdown Trigger</a> 
    <div class="dropdown-menu">Dropdown Content</div> 
</div> 

JS

$('input').click(function() { 
    $('.dropdown').addClass('open'); 
    $('.dropdown').addClass('test-class'); 
}); 
+1

@Popnoodles,我從加入的jsfiddle代碼質疑。 –

回答

30

你的主要問題是,你不能傳播到document停止click事件。 Bootstrap在document上設置了一個關閉下拉菜單的事件偵聽器。

$('input').on('click', function (e) { 
    e.stopPropagation(); 
    $(this).next('.dropdown').find('[data-toggle=dropdown]').dropdown('toggle'); 
}); 

的jsfiddle - http://jsfiddle.net/8p6Wd/2/

+2

@Popnoodles這是真的,但OP的代碼不會設置任何內部狀態或觸發通常與下拉式插件關聯的自定義事件。 – Phil

+0

OMG你救了我,非常感謝 – siebmanb

0

試試這個...

<div class="dropdown"> 
    <input type="button" value="Classes" data-toggle="dropdown"/> 
    <a data-toggle="dropdown" href="#">Dropdown Trigger</a> 
    <div class="dropdown-menu">Dropdown Content</div> 
</div> 
+1

(A)我不認爲這是有效的,(B)我需要觸發器完全獨立於下拉菜單。 – jacksondc