用 JS 触发 Bootstrap 下拉菜单答案

【问题标题】：Trigger Bootstrap Dropdown with JS用 JS 触发 Bootstrap 下拉菜单
【发布时间】：2014-01-28 21:49:49
【问题描述】：

我需要通过 JavaScript 打开一个 Bootstrap 下拉菜单。 This answer 建议添加和删除 open 类，但是当我尝试这样做时，什么也没有发生。添加不同的类工作正常。 Bootstrap 是否阻止我这样做？

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>

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

【问题讨论】：

@Popnoodles，我已将 jsfiddle 中的代码添加到问题中。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

试试这个...

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

【讨论】：

【解决方案2】：

您的主要问题是您没有阻止点击事件传播到document。 Bootstrap 在 document 上设置了一个事件监听器，用于关闭下拉菜单。

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

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

【讨论】：

@Popnoodles 确实如此，但 OP 的代码不会设置任何内部状态或触发通常与 Dropdown 插件关联的自定义事件。