Basculer afficher / masquer sur le clic avec jQuery
J'ai un élément div, donc quand je clique dessus, un autre div qui est caché par défaut glisse et s'affiche, voici le code de l'animation elle-même:
$('#myelement').click(function(){
$('#another-element').show("slide", { direction: "right" }, 1000);
});
Comment puis-je faire cela quand je clique sur le #myelement Une fois de plus (quand l'élément est déjà montré) il va Cacher le #another-element comme ceci:
$('#another-element').hide("slide", { direction: "right" }, 1000);?
Donc, fondamentalement, il devrait fonctionner exactement comme un slideToggle, mais le show/hide fonctions. Est-ce possible?
6 réponses
L'événement toggle est obsolète dans la version 1.8 et supprimé dans la version 1.9
essaie ça...
$('#myelement').toggle(
function () {
$('#another-element').show("slide", {
direction: "right"
}, 1000);
},
function () {
$('#another-element').hide("slide", {
direction: "right"
}, 1000);
});
Remarque: Cette signature de méthode a été obsolète dans jQuery 1.8 et supprimée dans jQuery 1.9. jQuery fournit également une méthode d'animation nommée .toggle() qui permet de basculer la visibilité des éléments. Si l' animation ou la méthode événement est déclenché dépend de l'ensemble des arguments j'ai passé, docs jQuery .
Le .basculer() la méthode est fournie pour plus de commodité. Il est relativement simple à mettre en œuvre le même comportement à la main, et cela peut être nécessaire si les hypothèses .basculer() prouver limite. Exemple, .toggle() n'est pas garanti pour fonctionner correctement si elle est appliquée deux fois au même élément. Depuis .toggle() utilise en interne un clic gestionnaire pour faire son travail, nous devons dissocier Cliquez pour supprimer un comportement attaché avec .toggle (), de sorte que d'autres gestionnaires de clic peuvent être pris dans le crossfire. Le la mise en œuvre appelle également .preventDefault() sur le événement, donc les liens ne seront pas suivis et les boutons ne seront pas cliqués si .toggle () a été appelé sur l'élément, jQuery docs
Vous basculez entre la visibilité en utilisant afficher et masquer avec un clic. Vous pouvez mettre la condition sur la visibilité si l'élément est visible puis masquer sinon l'afficher. Notez que vous aurez besoin de jQuery UI pour utiliser plus d'effets avec afficher / cacher comme direction.
$( "#myelement" ).click(function() {
if($('#another-element:visible').length)
$('#another-element').hide("slide", { direction: "right" }, 1000);
else
$('#another-element').show("slide", { direction: "right" }, 1000);
});
Ou, utilisez simplement basculer au lieu de cliquer. En utilisant toggle, vous n'aurez pas besoin d'une instruction condition (if-else). comme suggéré par T. J. Crowder.
$( "#myelement" ).click(function() {
$('#another-element').toggle("slide", { direction: "right" }, 1000);
});
Utilisez la fonction jQuery toggle qui fait la tâche pour vous
.toggle () - affiche ou masque les éléments correspondants.
$('#myelement').click(function(){
$('#another-element').toggle('slow');
});
Vous pouvez utiliser ce code pour basculer votre élément var ele = jQuery ("yourelementid"); ele.slideToggle ('lent'); cela fonctionnera pour vous:)
Cela fonctionnera pour u
$("#button-name").click(function(){
$('#toggle-id').slideToggle('slow');
});
Vous pouvez utiliser la fonction .toggle() au lieu de .click()....
$(document).ready( function(){
$("button").click(function(){
$("p").toggle(1000,'linear');
});
});