web-dev-qa-db-fra.com

Bootstrap 3 l'effondrement peut avoir plusieurs panneaux ouverts après l'ouverture programmée d'un panneau

J'ai un problème avec bootstrap 3 collapse, après avoir ouvert un panneau par programmation, il est possible de garder un autre panneau ouvert tout en rouvrant le premier panneau.

Mon [~ # ~] html [~ # ~] :

<button type="button" class="btn showpanel">Show panel 3</button>
<button type="button" class="btn hidepanel">Hide panel 3</button>
<button type="button" class="btn openpanel">Open panel 3</button>
<button type="button" class="btn closepanel">Close panel 3</button>
<hr/>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
            </h4>
        </div>
        <div id="panel1" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
    </div>
</div>

Et certains JavaScript :

$(".hidepanel").on("click", function() {
    $("#panel3").parent().hide();
});
$(".showpanel").on("click", function() {
    $("#panel3").parent().show();
});
$(".openpanel").on("click", function() {
    $("#panel3").collapse('show');
});
$(".closepanel").on("click", function() {
    $("#panel3").collapse('hide');
});

Mon jsfiddle qui illustre ce problème

Reproduire:

  1. Cliquez sur le bouton "Ouvrir le panneau 3".
  2. Cliquez sur 'Panel 2' pour l'ouvrir. Jusqu'à présent, aucun problème.
  3. Cliquez sur 'Panel 3' pour l'ouvrir à nouveau. Le panel 2 reste ouvert!

Donc, l'ouverture d'un panneau par programmation semble gâcher l'enregistrement interne des bootstraps sur les états du panneau? Je ne vois rien de visiblement mal avec le "changement d'état" du troisième panneau (ce sont les changements de classe de "s'effondrer" à "dans" et inversement comme vous vous en doutez).

twitter-bootstraptwitter-bootstrap-3collapse
17
Moolie

Vous pouvez créer un gestionnaire pour l'événement collapse show qui se produit juste avant l'affichage des panneaux.

Ajoutez ceci pour vous assurer que tous les autres panneaux ouverts sont fermés avant que celui sélectionné ne soit affiché:

$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

Démo Bootply

Vous pouvez en savoir plus sur les événements collapse ici: http://getbootstrap.com/javascript/#collapse

28
Zim

Je pense que le problème est dû à la façon dont vous changez le panneau ouvert. Plutôt que d'utiliser la fonction "afficher", vous devez déclencher l'événement de clic sur le lien du panneau approprié. Par exemple avec un accordéon avec un id "accordéon", avec trois panneaux, si vous voulez montrer le panneau 2 alors utilisez:

$("a[href=#accordion-2]").click()

Ou quel que soit l'ID que vous avez donné à votre deuxième panneau (j'utilise twitterboostrapmvc pour que les ID de panneau soient générés automatiquement à partir de l'ID d'accordéon).

2
ProfNimrod

Pour toute personne utilisant data-target attributs pour contrôler l'accordéon (plutôt que l'attribut href), il s'agit d'une adaptation de la réponse de ProfNimrod qui cliquera sur l'élément pertinent si la cible est actuellement masquée. (Notez que la vérification if repose sur la configuration de l'accordéon avec la classe collapsed appliquée par défaut, ce que je trouve utile de toute façon pour profiter de en utilisant css pour mettre une icône en chevron) sur les accordéons ).

var expandAccordion = function() {
    var header = $('[data-target="#accordion-0"]');
    if (header.hasClass('collapsed')) {
        header.click();
    }
}
0
Tim