2014-01-10 162 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