web-dev-qa-db-fra.com

Bootstrap Collapse ne bascule pas après avoir affiché, masqué ou basculé du code

Mon HTML est:

<div id="accordion-container">
    <div class="accordion" id="navaccordion">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseMenu">
                    <strong>My Menus</strong>
                </a>
            </div>
            <div id="collapseMenu" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <div class="navigation" id="navigationcontainer">
                        <span id="menutree">
                            MenuTree
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQuickLinks">
                    <strong>Quick Links</strong>
                </a>
            </div>
            <div id="collapseQuickLinks" class="accordion-body collapse">
                <div class="accordion-inner">
                    <div class="quicklinks" id="quicklinkscontainer">
                        <span id="quicklinkslist">
                            QuickLinks
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQueue">
                    <strong>Queue</strong>
                </a>
            </div>
            <div id="collapseQueue" class="accordion-body collapse">
                <div class="accordion-inner">
                    <div class="queue" id="queuecontainer">
                        <span id="queuetree">
                            Queue
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Mon exemple est ici: http://jsfiddle.net/pdavis68/Xut4C/2/

Si vous supprimez le code JavaScript, vous remarquerez que le basculement de l'effondrement fonctionne correctement. Si vous cliquez sur "Liens rapides", "Mes menus" se ferme et "Liens rapides" s'ouvre.

Si vous laissez le JS dedans, vous remarquerez que l'ouverture de "Mes menus" ou "Liens rapides" ne fait pas disparaître quoi que ce soit d'autre, mais si vous ouvrez "Queue", cela entraînera quand même les autres à s'effondrer.

Cela ne semble pas avoir d'importance si j'utilise la commande "basculer", "afficher" ou "masquer" dans l'effondrement, cela interrompra la fonctionnalité de basculement.

De plus, dans l'exemple, ce qui devrait se produire (à mon avis, au moins), c'est que "Mes menus" devrait basculer fermé (ce qu'il fait), puis "Liens rapides" devrait basculer ouvert (ce qu'il ne fait PAS). )

Donc, 2 questions:

  1. Comment afficher/masquer des groupes par programme sans interrompre la fonctionnalité de basculement?

  2. Comment basculer les choses ouvertes?

javascripttwitter-bootstrapcollapse
20
Pete

1.Essayez d'utiliser collapse() avec des options, le 'parent' Est important

$("#collapseMenu").collapse({"toggle": true, 'parent': '#navaccordion'});
$("#collapseQuickLinks").collapse({"toggle": true, 'parent': '#navaccordion' });

Violon: http://jsfiddle.net/hieuh25/Xut4C/6/

2.En principe, vous avez 2 façons:

  • Ajoutez la classe in à cette div, par exemple: <div id="collapseMenu" class="accordion-body collapse in"> Provoque l'ouverture de cette div.

  • Utilisez collapse() avec l'option 'toggle': true Comme ci-dessus, lorsque le div est fermé.

J'espère que cela aide.

21
Hieu Nguyen

Essayez d'abord d'activer votre contenu en tant qu'élément pliable. J'ai survolé cette partie en lisant la documentation et ça m'a vraiment embarrassé.

$('#myCollapsible').collapse({
    toggle: false
})

Après l'avoir activé, vous pouvez le masquer et l'afficher comme d'habitude.

$('#myCollapsible').collapse('hide');
$('#myCollapsible').collapse('show');

http://getbootstrap.com/javascript/#collapse-methods

8
Jared Christensen

Vous pouvez également ajouter data-parent="#navaccordion" À <div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion"> Et appeler sans touche supplémentaire 'parent' Comme .collapse({"toggle": true});

2
woto