Trigger Bootstrap Dropdown with JS

Trigger Bootstrap Dropdown with JS

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

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

Solutions/Answers:

Solution 1:

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/

Solution 2:

try this…

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

References

Related:  Bootstrap 4 Center Vertical and Horizontal Alignment