-1

Tengo el siguiente ejercicio de jQuery, he estado buscando funciones y no he encontrado nada, el ejercicio es el siguiente.

Crea un div de 800x70 con background gris, que al hacer click se ponga 250x250 y al hacer click de nuevo, vuelva a su tamaño original.

Hasta ahora he conseguido que al hacer el primer click si que se cambie al tamaño pedido en el ejercicio (mediante cambio de clases en CSS) pero no consigo encontrar la forma de que cuando haga el segundo click me vuelva estar por defecto.

1
  • 3
    Muestra lo que has conseguido hasta ahora el 22 nov. 2019 a las 12:38

2 respuestas 2

3

Puedes poner y quitar la clase con los estilos que necesitas usando toggleClass, por ejemplo

 $('#myDiv').on('click', function(e){
    $(this).toggleClass('mutedDiv');
  });
#myDiv{
  width: 800px;
  height: 700px;
  background-color:gray;
}

.mutedDiv{
  width: 250px!important;
  height: 250px!important;    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv"></div>

Asi cada vez que le des click al div o contenedor que selecciones pondrá o quitara la clase respectivamente si ya la posee o no

5
  • 3
    cree una respuesta alterna a la tuya, si te parece, unifica las dos y borro la mia. el 22 nov. 2019 a las 14:20
  • 2
    @CamiloBernal ya edite la respuesta, gracias por el aporte. el 22 nov. 2019 a las 15:18
  • 3
    Listo, ya eliminé la mia. :P el 22 nov. 2019 a las 15:23
  • Muchas gracias, ha servido a la perfección !
    – lluc matas
    el 24 nov. 2019 a las 15:29
  • ¿Esta respuesta solucionó tu problema, @llucmatas ? Por favor no olvides marcarla como aceptada si tu problema fue resuelto. Puedes hacerlo marcando el ✓ en la parte izquierda de la respuesta (se pondrá verde, ganarás 2 puntos de reputación y podrías acceder a nuevos privilegios). ¡Mira ¿Qué debo hacer cuando alguien contesta mi pregunta? si tienes alguna duda!
    – fedorqui
    el 25 nov. 2019 a las 11:29
1

Cuando haga click, cambiale o añadele una nueva.

Luego a traves de jquery cuando haga click, comprueba si lleva una clase u otra y en funcion de la clase que lleve haces lo que tengas que hacer.

$( "#id_que_buscas" ).on( "click", function() {
  if ($(this).hasClass("pepito")){
     $(this).addClass("juanito");
  }else{
     $(this).removeClass("pepito");
  }
});

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.