Cuando hago clic por primera vez en un cuadro, se agranda y cuando lo vuelvo a hacer clic, se reduce a su tamaño original. Esto aplica para todas las cajas. Pero cuando hago clic en un cuadro que ha pasado por estos dos eventos, no vuelve a crecer. Quiero que todas mis cajas siempre puedan crecer y encogerse a su tamaño original, no solo una vez. Echa un vistazo a este violín
$(".item").on("click", function() { $(this).addClass("grow"); $(".item").not(this).each(function() { $(this).addClass("collapse"); }) $(this).on("click", function() { $(this).removeClass("grow"); $(".item").not(this).each(function() { $(this).removeClass("collapse"); }) }) })¿Alguien tiene una solución a este problema?
¿Por qué no verificar primero la clase .grow ? ↓ violín DEMO
$(".item").on("click", function() { $(this).toggleClass("grow"); $(".item").not(this).toggleClass("collapse"); })No es necesario escribir un código tan largo. Puedes hacer esto fácilmente usando el método toggleClass(). Ni siquiera necesita colapsar la clase para que la caja vuelva a su posición normal.
Puedes escribir tu código como:
$(".item").on("click", function(){ $(this).toggleClass("grow"); });