jQuery Alternar Ocultar/Mostrar
-
Utilice el método
toggle()de jQuery para alternar Ocultar/Mostrar -
Utilice los métodos
hide()yshow()para alternar ocultar/mostrar
La biblioteca jQuery minimiza el uso de una pila de códigos y ayuda con soluciones con menos líneas de código.
Hasta la versión 1.8 de jQuery, el método toggle() se usaba ampliamente, y en la versión 1.8 quedó obsoleto. En la versión 1.9, se eliminó con un token distinto.
Discutiremos en nuestro ejemplo cómo funciona la función alternar () y por qué se desaconsejó más adelante. Otra forma de percibir la solución para el comportamiento de alternar es usar los métodos show() y hide().
En este sentido, consideraremos una declaración condicional, por lo que podemos usar un botón para realizar la tarea de alternar. Profundicemos en las instancias para una mejor visualización.
Utilice el método toggle() de jQuery para alternar Ocultar/Mostrar
En el caso de uso del método toggle(), generalmente lo activamos mediante un evento click. De nuevo, en la implementación del método, hay otro evento click junto con un preventDefault().
Por lo tanto, anula el evento de doble clic y se supone que funciona correctamente. Pero el método es demasiado sencillo y, a menudo, causa problemas si se llama al evento más de dos veces.
Entonces, para deshacerse de esta característica ambigua, más tarde, se eliminó el método. Sin embargo, todavía se considera que se usa para ser explícito y se puede usar con menos líneas de códigos en lugar de cualquier otra forma.
Veamos el código para la demostración de la función.
Fragmento de código:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#ele1").click(function(){
$("#ele2").toggle(1500);
});
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>
Producción:
-method-of-jquery-to-toggle.webp)
Utilice los métodos hide() y show() para alternar ocultar/mostrar
Aquí, iniciaremos con la instancia del evento clic y luego generaremos una declaración condicional para verificar si el contenido es visible cuando se hace clic en el botón. Si conduce a un caso de verdad, lo configuramos en hide(); de lo contrario, lo estableceremos en show().
Revisemos los bloques de código y examinemos el proceso.
Fragmento de código:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#ele1").click(function(){
var x = $('#ele2');
if(x.is(':visible')){
x.hide("slide");
}
else{
x.show("slide");
}
});
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>
Producción:
-and-show()-method-to-toggle.webp)
