web-dev-qa-db-fra.com

Trigger Bootstrap Dropdown avec JS

Je dois ouvrir un menu déroulant Bootstrap via JavaScript. Cette réponse suggère d'ajouter et de supprimer la classe open, mais lorsque j'essaie, rien ne se passe. L'ajout d'une classe différente fonctionne bien. Est-ce que Bootstrap m'empêche de le faire?

Exemple de travail sur 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');
});
javascriptjquerycsstwitter-bootstrap
17
jacksondc

Votre principal problème est que vous n'empêchez pas l'événement click de se propager à document. Bootstrap définit un écouteur d'événement sur la document qui ferme les menus déroulants.

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

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

32
Phil

essaye ça...

<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>
0
Sarower Jahan