Trigger Bootstrap Dropdown with JS

css, javascript, jquery, twitter-bootstrap

Solution

Your main problem is that you aren't stopping the click event from propagating to the `document`. Bootstrap sets an event listener on the `document` that closes dropdowns.

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

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

Problem

I need to open a Bootstrap dropdown menu via JavaScript. This answer suggests adding and removing the `open` class, but when I try that, nothing happens. Adding a different class works fine. Is Bootstrap preventing me from doing this? Working sample on 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'); }); ```

Original source