Changement div texte avec jQuery Bascule
Lors de l'utilisation de slideToggle
, comment changer le Texte de clôture/spectacle?
J'ai fait simple, mais ne peut pas obtenir le changement de texte dos.
Voici ce que j'ai fait:
JS:
$(document).ready(function(){
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
});
$('.open2').click(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
});
});
CSS:
body{
font-size:20px;
}
#box{
border:2px solid #000;
width:500px;
min-height:300px;
}
.open,.open2 {
width:450px;
height:50px;
background:blue;
margin:5px auto 0 auto;
color:#fff;
}
.showpanel,.showpanel2{
width:450px;
height:300px;
margin:0 auto 10px auto;
background:red;
display:none;
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div class="open">Show</div>
<div class="showpanel">This is content</div>
<div class="open2">Show</div>
<div class="showpanel2">This is content</div>
</div>
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser le
is()
affirmation méthode pour vérifier si le panneau est ouvert ou fermé dans l'animation de rappel et définir le texte en conséquence - http://jsfiddle.net/9EFNK/7/Il suffit d'ajouter une simple instruction if pour tester le texte comme
Comme ce DÉMO
Pas la plus jolie des méthodes, mais il fait le travail en une seule instruction.
Voici une version mise à jour http://jsfiddle.net/9EFNK/1/
Vous pouvez simplement basculer une classe sur ouvrir/fermer, effectuer une vérification de cette classe et de modifier le contenu du texte en conséquence
Utilisation .toggle()
Ici est Travail Démo
vérifier cela peut être de l'utilisateur question est de résoudre Violon
essayer cette démo
Utiliser cette
Ici est de savoir comment vous l'utilisez
JS:
HTML:
Vous pouvez même utiliser le html à la condition html encodé correctement