jquery - data - Acordeón de colapso de Bootstrap 3: colapsar todo funciona pero no puede expandirse todo mientras se mantiene el padre de datos
data-toggle="collapse" (4)
Respuesta actualizada
Intentar abrir varios paneles de un control de colapso configurado como un acordeón, es decir, con el conjunto de atributos data-parent , puede resultar bastante problemático y con errores (consulte esta pregunta en varios paneles abiertos después de abrir un panel programáticamente )
En cambio, el mejor enfoque sería:
- Permitir que cada panel se active individualmente
- Luego, aplique el comportamiento del acordeón manualmente donde corresponda.
Para permitir que cada panel alterne individualmente , en el elemento data-toggle="collapse" , establezca el atributo de data-target en el selector de ID del panel .collapse (en lugar de configurar el atributo de data-parent en el control principal. Puede leer más sobre esto en la pregunta Modifique el complemento de colapso de Twitter Bootstrap para mantener abiertos los acordeones .
Aproximadamente, cada panel debería verse así:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"
data-toggle="collapse"
data-target="#collapseOne">
Collapsible Group Item #1
</h4>
</div>
<div id="collapseOne"
class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
Para aplicar manualmente el comportamiento de acordeón , puede crear un controlador para el evento de mostrar colapsar que se produce justo antes de que se muestren los paneles. Use esto para asegurarse de que cualquier otro panel abierto esté cerrado antes de que se muestre el seleccionado (consulte esta respuesta para abrir varios paneles ). También solo querrá que el código se ejecute cuando los paneles estén activos. Para hacer todo eso, agregue el siguiente código:
$(''#accordion'').on(''show.bs.collapse'', function () {
if (active) $(''#accordion .in'').collapse(''hide'');
});
Luego use show y hide para alternar la visibilidad de cada uno de los paneles y data-toggle para habilitar y deshabilitar los controles.
$(''#collapse-init'').click(function () {
if (active) {
active = false;
$(''.panel-collapse'').collapse(''show'');
$(''.panel-title'').attr(''data-toggle'', '''');
$(this).text(''Enable accordion behavior'');
} else {
active = true;
$(''.panel-collapse'').collapse(''hide'');
$(''.panel-title'').attr(''data-toggle'', ''collapse'');
$(this).text(''Disable accordion behavior'');
}
});
Demostración de trabajo en jsFiddle
Estoy usando Bootstrap 3 y tratando de configurar la siguiente estructura de acordeón / colapso:
Onload: cada panel de acordeón en un grupo está completamente colapsado y funciona como documentado / esperado.
Hacer clic en el botón: cada panel de acordeón se expande y hacer clic en el botón "alternar" no tiene ningún efecto (incluidos los efectos de anclaje de URL).
Otro clic del botón: Todos los paneles vuelven al estado de carga; todo colapsado y clicable como es normal.
Llegué al paso 2, pero cuando vuelvo a hacer clic en el botón en el paso 3 no tiene ningún efecto. También veo que no se informaron errores de consola en las herramientas de desarrollo de Chrome o que se ejecuta el código a través de mi JSHint local.
Me gustaría que este ciclo sea repetible cada vez que se hace clic en el botón.
Configuré mi código aquí http://bootply.com/98140 y aquí http://jsfiddle.net/A9vCx/
Me encantaría saber lo que estoy haciendo mal y agradezco las sugerencias. ¡Gracias!
Mi HTML:
<button class="collapse-init">Click to disable accordion behavior</button>
<br><br>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
</div>
Mi JS:
$(function() {
var $active = true;
$(''.panel-title > a'').click(function(e) {
e.preventDefault();
});
$(''.collapse-init'').on(''click'', function() {
if(!$active) {
$active = true;
$(''.panel-title > a'').attr(''data-toggle'', ''collapse'');
$(''.panel-collapse'').collapse({''toggle'': true, ''parent'': ''#accordion''});
$(this).html(''Click to disable accordion behavior'');
} else {
$active = false;
$(''.panel-collapse'').collapse({''toggle'': true, ''parent'': ''#accordion''});
$(''.panel-title > a'').removeAttr(''data-toggle'');
$(this).html(''Click to enable accordion behavior'');
}
});
});
La mejor solución probada es colocar el siguiente fragmento pequeño que colapsará la pestaña de acordeón que ya está abierta cuando carga. En mi caso, la última sexta pestaña estaba abierta, así que la hice colapsar en la carga de la página.
$(document).ready(){
$(''#collapseSix'').collapse("hide");
}
Para mantener intacta la naturaleza del acordeón cuando desee utilizar también las funciones ''ocultar'' y ''mostrar'' como .collapse( ''hide'' ) , debe inicializar los paneles plegables con la propiedad principal establecida en el objeto con toggle: false antes de realizar cualquier llamada ''ocultar'' o ''mostrar''
// initialize collapsible panels
$(''#accordion .collapse'').collapse({
toggle: false,
parent: ''#accordion''
});
// show panel one (will collapse others in accordion)
$( ''#collapseOne'' ).collapse( ''show'' );
// show panel two (will collapse others in accordion)
$( ''#collapseTwo'' ).collapse( ''show'' );
// hide panel two (will not collapse/expand others in accordion)
$( ''#collapseTwo'' ).collapse( ''hide'' );
Por el motivo que sea $(''.panel-collapse'').collapse({''toggle'': true, ''parent'': ''#accordion''}); solo parece funcionar la primera vez y solo funciona para expandir el colapsable. (Intenté comenzar con un colapso expandido y no colapsaría).
Podría ser algo que se ejecute una vez que inicialice el colapso con esos parámetros.
Tendrás más suerte usando los métodos show y hide .
Aquí hay un ejemplo:
$(function() {
var $active = true;
$(''.panel-title > a'').click(function(e) {
e.preventDefault();
});
$(''.collapse-init'').on(''click'', function() {
if(!$active) {
$active = true;
$(''.panel-title > a'').attr(''data-toggle'', ''collapse'');
$(''.panel-collapse'').collapse(''hide'');
$(this).html(''Click to disable accordion behavior'');
} else {
$active = false;
$(''.panel-collapse'').collapse(''show'');
$(''.panel-title > a'').attr(''data-toggle'','''');
$(this).html(''Click to enable accordion behavior'');
}
});
});
Actualizar
De acuerdo, KyleMit parece tener una mejor forma de manejar esto que yo. Estoy impresionado con su respuesta y comprensión.
No entiendo lo que está pasando o por qué el show parecía estar cambiando en algunos lugares.
Pero después de perder el tiempo por un tiempo ... Finalmente vino la siguiente solución:
$(function() {
var transition = false;
var $active = true;
$(''.panel-title > a'').click(function(e) {
e.preventDefault();
});
$(''#accordion'').on(''show.bs.collapse'',function(){
if($active){
$(''#accordion .in'').collapse(''hide'');
}
});
$(''#accordion'').on(''hidden.bs.collapse'',function(){
if(transition){
transition = false;
$(''.panel-collapse'').collapse(''show'');
}
});
$(''.collapse-init'').on(''click'', function() {
$(''.collapse-init'').prop(''disabled'',''true'');
if(!$active) {
$active = true;
$(''.panel-title > a'').attr(''data-toggle'', ''collapse'');
$(''.panel-collapse'').collapse(''hide'');
$(this).html(''Click to disable accordion behavior'');
} else {
$active = false;
if($(''.panel-collapse.in'').length){
transition = true;
$(''.panel-collapse.in'').collapse(''hide'');
}
else{
$(''.panel-collapse'').collapse(''show'');
}
$(''.panel-title > a'').attr(''data-toggle'','''');
$(this).html(''Click to enable accordion behavior'');
}
setTimeout(function(){
$(''.collapse-init'').prop(''disabled'','''');
},800);
});
});