Trigger Bootstrap Dropdown with JS

Question

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');
});

@Popnoodles, I have added code from jsfiddle to question.

Pranav Singh
– Pranav Singh

2014-01-10 03:29:06 +00:00
Commented Jan 10, 2014 at 3:29 — Pranav Singh
– Pranav Singh, Commented Jan 10, 2014 at 3:29

Phil · Accepted Answer · 2014-01-10 03:35:02Z

42

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/

answered Jan 10, 2014 at 3:35

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Over a year ago

@Popnoodles That's true but the OP's code doesn't set any of the internal state or trigger the custom events usually associated with the Dropdown plugin.

Sarower Jahan · Accepted Answer · 2015-03-07 05:40:28Z

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>

answered Mar 7, 2015 at 5:40

Sarower Jahan

1,5451 gold badge13 silver badges21 bronze badges

Collectives™ on Stack Overflow

Trigger Bootstrap Dropdown with JS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related