0
227
Views¿Cómo puedo mover un elemento a la última posición en su contenedor flexbox?
Tengo un contenedor de caja flexible que incluye varios elementos de detalles. Siguen el comportamiento de envoltura flexible. Quiero que un elemento de detalles salte debajo de los otros elementos del contenedor, cuando se abre.
Entonces, debería ir de esto:
a esto:
Todos los detalles que se abren después deben comportarse de la misma manera y saltar a la última posición. Hasta ahora, he intentado cambiar el orden del elemento de detalles en el que se hace clic con javascript/jQuery:
$('details').click(function (event) { this.style.order="2"; $('details').not(this).style.order="1"; }); .container { display:flex; flex-wrap: wrap; } details { order: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <details> <summary> first details </summary> <p>some details</p> </details> <details> <summary> second details </summary> <p>some details</p> </details> <details> <summary> third details </summary> <p>some details</p> </details> <details> <summary> fourth details </summary> <p>some details</p> </details> <details> <summary> fifth details </summary> <p>some details</p> </details> </div>¿Necesito dar a los elementos de detalles una clase para esto y abordarlos de alguna manera? ¿O hay alguna otra manera de lograr lo que estoy buscando?
2 answers
Answer question0
Hice un par de cambios. Esto parece darte lo que estás buscando. Los bordes añadidos son para mayor claridad. Vea el código a continuación.
El truco consiste en establecer todos los <details> en el mismo grupo de pedidos. En este caso, usé 0. Luego, cambie los <details> en los que se hizo clic para order: 1 (solo debe ser un número de grupo mayor que el asignado a todos los <details> ).
Otra parte algo complicada es que para 'desestablecer' el atributo 'abrir' en los <details> abiertos, debe usar removeAttr() (jQuery) o .removeAttribute (vanilla JS).
Y finalmente, mucha buena información aquí MDN .
$('details').click(function(event) { $('details').css({order: 0, width: "auto"}).removeAttr("open"); $(this).css({order: 1, width: "100%"}); }); .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border: 1px solid blue; } details { border: 1px solid red; padding: 1rem; order: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <details> <summary> first details </summary> <p>some details</p> </details> <details> <summary> second details </summary> <p>some details</p> </details> <details> <summary> third details </summary> <p>some details</p> </details> <details> <summary> fourth details </summary> <p>some details</p> </details> <details> <summary> fifth details </summary> <p>some details</p> </details> </div>0
Si se supone que sucederá con todos los detalles abiertos después, puede agregar una clase a .container
$('details').click(function (event) { $('.container').addClass('details-below'); }); .container { display:flex; flex-wrap: wrap; } .container.details-below details { order: 2; }