html5 - horizontal - El botón Acordeón Bootstrap alternar "datos padre" no funciona
menu collapse bootstrap 4 (6)
Como dijo Blazemonger, #parent, .panel y .collapse tienen que ser descendientes directos. Sin embargo, si no puede cambiar su html, puede hacer una solución usando los eventos y métodos bootstrap con el siguiente código:
$(''#your-parent .collapse'').on(''show.bs.collapse'', function (e) {
var actives = $(''#your-parent'').find(''.in, .collapsing'');
actives.each( function (index, element) {
$(element).collapse(''hide'');
})
})
Estoy intentando crear un acordeón usando Bootstrap 3 usando el botón plegable con el atributo de datos, sin el marcado de acordeón. Simplemente me parece más limpio.
Sin embargo, no puedo hacer que funcione el atributo de datos padre . Quiero abrir una pregunta, cerrar todas las demás. Estoy leyendo los documentos ( http://getbootstrap.com/javascript/#collapse-usage ) pero todavía no puedo hacer que funcione.
Estoy usando el siguiente código:
<div class="accordion" id="myAccordion">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
<div id="collapsible-1" class="collapse">
<p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
<div id="collapsible-2" class="collapse">
<p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
<div id="collapsible-3" class="collapse">
<p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
</div>
</div>
Aquí está el JSFiddle: http://jsfiddle.net/twinsen/AEew4/
Estaré muy feliz si alguien me señala dónde estoy cometiendo un error: /
Prueba esto. Solución simple sin dependencias
$(''[data-toggle="collapse"]'').click(function() {
$(''.collapse.in'').collapse(''hide'')
});
Si encontré esta alteración a la respuesta de Krzysztof ayudó a mi problema
$(''#'' + parentId + '' .collapse'').on(''show.bs.collapse'', function (e) {
var all = $(''#'' + parentId).find(''.collapse'');
var actives = $(''#'' + parentId).find(''.in, .collapsing'');
all.each(function (index, element) {
$(element).collapse(''hide'');
})
actives.each(function (index, element) {
$(element).collapse(''show'');
})
})
si tiene paneles anidados, entonces también puede necesitar especificar cuáles agregando otro nombre de clase para distinguir entre ellos y agregarlo al selector a en el JavaScript anterior.
Tenga en cuenta que no solo hay dependencia en .panel, también tiene dependencia en la estructura DOM.
Asegúrate de que tus elementos estén estructurados así:
<div id="parent-id">
<div class="panel">
<a data-toggle="collapse" data-target="#opt1" data-parent="#parent-id">Control</a>
<div id="opt1" class="collapse">
...
Básicamente es lo que dijo @Blazemonger, pero creo que la jerarquía del elemento objetivo también importa. No terminé de probar todas las posibilidades, pero básicamente debería funcionar si sigues esta jerarquía.
FYI, tuve más capas entre el control div y el contenido div y eso no funcionó.
Tengo el mismo problema al alternar el acordeón. Pero cuando trato de poner el bloque de script en el bloque de encabezado, ¡funciona para mi caso!
<head>
...
<link rel="stylesheet" href="../assets/css/bootstrap.css" />
<script src="../assets/js/jquery-1.9.1.min.js" ></script>
<script src="../assets/js/bootstrap.js" ></script>
</head>
Bootstrap 4
Use el atributo data-parent="" en el elemento de colapso (en lugar del elemento desencadenante)
<div id="accordion">
<div class="card">
<div class="card-header">
<h5>
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
Collapsible #1 trigger
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Collapsible #1 element
</div>
</div>
</div>
... (more cards/collapsibles inside #accordion parent)
</div>
Bootstrap 3
Vea este número en GitHub: https://github.com/twbs/bootstrap/issues/10966
Hay un "error" que hace que el acordeón dependa de la clase .panel cuando se utiliza el atributo de data-parent . Para solucionarlo, puede ajustar cada grupo de acordeón en un div ''panel''.
<div class="accordion" id="myAccordion">
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
<div id="collapsible-1" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
<div id="collapsible-2" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
<div id="collapsible-3" class="collapse">
...
</div>
</div>
</div>
Editar
Como se menciona en los comentarios, cada sección no tiene que ser un .panel . Sin embargo...
-
.paneldebe ser un elemento directo del elemento utilizado comodata-parent= - cada sección de acordeón (
data-toggle=) debe ser un hijo directo del.panel( http://www.bootply.com/AbiRW7BdD6# )