Распаковка триггерного бутстрапа с JS

Мне нужно открыть раскрывающееся меню Bootstrap с помощью JavaScript. Этот ответ предлагает добавить и удалить класс 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>

JS

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

Ответ 1

Основная проблема заключается в том, что вы не останавливаете событие click от распространения до 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/

Ответ 2

попробуйте это...

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