jQuery Basculer Cacher/Montrer
-
Utilisez la méthode
toggle()de jQuery pour activer/masquer -
Utilisez les méthodes
hide()etshow()pour basculer entre le masquage et l’affichage
La bibliothèque jQuery minimise l’utilisation d’une pile de codes et aide à trouver des solutions avec moins de lignes de code.
Jusqu’à la version 1.8 de jQuery, la méthode toggle() était largement utilisée, et dans la version 1.8, elle était obsolète. Dans la version 1.9, il a été supprimé avec un jeton distinct.
Nous verrons dans notre exemple comment fonctionne la fonction toggle() et pourquoi elle a été découragée par la suite. Une autre façon de percevoir la solution pour le comportement de basculement consiste à utiliser les méthodes show() et hide().
À cet égard, nous considérerons une instruction conditionnelle, afin que nous puissions utiliser un bouton pour effectuer la tâche de basculement. Creusons dans les instances pour une meilleure visualisation.
Utilisez la méthode toggle() de jQuery pour activer/masquer
Dans le cas d’utilisation de la méthode toggle(), on la déclenche généralement par un événement click. Encore une fois, dans l’implémentation de la méthode, il y a un autre événement click avec un preventDefault().
Ainsi, il annule l’événement de double-clic et est censé fonctionner correctement. Mais la méthode est trop simple et cause souvent des problèmes si plus de deux fois l’événement est appelé.
Ainsi, pour se débarrasser de cette caractéristique ambiguë, plus tard, la méthode a été supprimée. Pourtant, il est toujours considéré comme étant utilisé pour être explicite, et il peut être utilisé avec moins de lignes de codes plutôt que de toute autre manière.
Voyons le code pour la démonstration de la fonction.
Extrait de code:
<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>
Production:
-method-of-jquery-to-toggle.webp)
Utilisez les méthodes hide() et show() pour basculer entre le masquage et l’affichage
Ici, nous allons commencer avec l’instance de l’événement click et générer plus tard une instruction conditionnelle pour vérifier si le contenu est visible lorsque le bouton est cliqué. S’il conduit à un cas de vérité, nous le définissons sur hide()); sinon, nous le mettrons à show().
Vérifions les blocs de code et examinons le processus.
Extrait de code:
<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>
Production:
-and-show()-method-to-toggle.webp)
