twitter bootstrap - propiedades - El colapso de Bootstrap 3 puede tener varios paneles abiertos después de abrir un panel mediante programación

propiedades de bootstrap

Question

Tengo un problema con el colapso de bootstrap 3, después de abrir un panel programáticamente es posible mantener otro panel abierto mientras se vuelve a abrir el primer panel.

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

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

Mi jsfiddle que demuestra este problema

Reproducir:

1. Haga clic en el botón ''Abrir panel 3''.
2. Haga clic en ''Panel 2'' para abrirlo. Hasta ahora no hay problemas.
3. Haga clic en ''Panel 3'' para abrirlo de nuevo. Panel 2 permanece abierto!

¿Así que abrir un panel programáticamente parece estropear el registro interno de bootstraps sobre los estados del panel? No veo nada visiblemente incorrecto con el ''cambio de estado'' del tercer panel (se trata de cambios de clase de ''colapso'' a ''dentro'' y viceversa, como cabría esperar).

Answer 1

Creo que el problema se debe a la forma en que está cambiando el panel abierto. En lugar de utilizar la función ''mostrar'', debe disparar el evento de clic en el enlace del panel correspondiente. Por ejemplo, con un acordeón con un id "acordeón", con tres paneles, si desea mostrar el panel 2, utilice:

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

O cualquier ID que haya dado a su segundo panel (uso twitterboostrapmvc para que las identificaciones del panel se generen automáticamente a partir de la identificación del acordeón).

Answer 2

Para cualquier persona que use atributos de data-target para controlar el acordeón (en lugar del atributo href ), esta es una adaptación de la respuesta de ProfNimrod que hará clic en el elemento relevante si el objetivo está actualmente oculto. (Tenga en cuenta que la verificación if basa en configurar el acordeón con la clase collapsed aplicada de forma predeterminada, lo que me parece útil para aprovechar el uso de css para poner un icono de chevron en los acordeones ).

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

Answer 3

Puede crear un controlador para el evento show colapsado que se produce justo antes de que se muestre cualquier panel.

Agregue esto para asegurarse de que cualquier otro panel abierto se cierre antes de que se muestre el seleccionado:

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

Demostración de Bootply

Puede leer más sobre los eventos de collapse aquí: http://getbootstrap.com/javascript/#collapse