Lorsque vous utilisez slideToggle
, comment changer le texte fermer / afficher. J'ai fait un simple, mais je ne peux pas récupérer le texte.
Voici ce que j'ai fait http://jsfiddle.net/9EFNK/ Si quelqu'un pouvait me donner une main? Merci
Vous pouvez utiliser la méthode d'assertion is()
pour vérifier si le panneau est ouvert ou fermé dans le rappel de l'animation et définir le texte en conséquence – http://jsfiddle.net/9EFNK/7/
$('.open').click(function(){ var link = $(this); $('.showpanel').slideToggle('slow', function() { if ($(this).is(':visible')) { link.text('close'); } else { link.text('open'); } }); });
Ajoutez simplement une simple déclaration if pour tester le texte de la manière suivante
$('.open').click(function(){ $('.showpanel').slideToggle('slow'); if($(this).text() == 'close'){ $(this).text('Show'); } else { $(this).text('close'); } });
A l'image de cette DEMO
Voici une version mise à jour http://jsfiddle.net/9EFNK/1/
Vous pouvez simplement basculer une classe sur fermer / ouvrir, effectuer un contrôle pour cette classe et modifier le texte contenu en conséquence
if( $(this).hasClass('active') ) $(this).text('open'); else $(this).text('Show'); $(this).toggleClass('active');
Pas le plus beau des méthodes, mais il fait le travail dans une déclaration unique.
$(this).text(($(this).text() == 'Close') ? 'Show' : 'Close');
Utilisez .toggle ()
Voici Démonstration de travail
$('.open').click(function(){ $('.showpanel').slideToggle('slow'); }).toggle(function() { $(this).text('Hide'); }, function() { $(this).text('Show'); });
Vérifiez que cela pourrait être question d'utilisateur est résoudre Fiddle
Essayez cette démo
$(document).ready(function(){ $('.open').toggle(function(){ $('.showpanel').slideToggle('slow'); $(this).text('close'); }, function(){ $('.showpanel').slideToggle('slow'); $(this).text('Show'); }); $('.open2').toggle(function(){ $('.showpanel2').slideToggle('slow'); $(this).text('close'); }, function(){ $('.showpanel2').slideToggle('slow'); $(this).text('Show'); }); });
Utilisez ceci
jQuery.fn.toggleText = function() { var altText = this.data("alt-text"); if (altText) { this.data("alt-text", this.html()); this.html(altText); } };
Voici comment vous l'utilisez
jQuery.fn.toggleText = function() { var altText = this.data("alt-text"); if (altText) { this.data("alt-text", this.html()); this.html(altText); } }; $('[data-toggle="offcanvas"]').click(function () { $(this).toggleText(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <button data-toggle="offcanvas" data-alt-text="Close">Open</button>