Changer l'icône sur le clic (bascule)
j'ai un script simple en jquery pour faire passer un div (afficher et masquer) lorsqu'un <p> est cliqué (j'utilise bootstrap).
HTML:
<p id="click_advance"><i class="icon-circle-arrow-down"></i> Advanced search</p>
<div id="display_advance">
<p>This is the advance search</p>
</div>
JS:
$('#click_advance').click(function(){
$('#display_advance').toggle('1000');
$(this).html('<i class="icon-circle-arrow-up"></i> Advanced search');
});
ainsi, quand je clique pour la première fois l'icône change de bas en haut mais évidemment quand je clique à nouveau sur "click_advance" l'icône ne change pas en arrière. Donc je veux l'effet de bascule comme le spectacle et se cacher; mais je suis muet sur la façon de le faire avec une icône.
5 réponses
au lieu d'écraser le html à chaque fois, il suffit de basculer la classe.
$('#click_advance').click(function() {
$('#display_advance').toggle('1000');
$("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
});
essaye ceci:
$('#click_advance').click(function(){
$('#display_advance').toggle('1000');
icon = $(this).find("i");
icon.hasClass("icon-circle-arrow-down"){
icon.addClass("icon-circle-arrow-up").removeClass("icon-circle-arrow-down");
}else{
icon.addClass("icon-circle-arrow-down").removeClass("icon-circle-arrow-up");
}
})
$('#click_advance').click(function(){
$('#display_advance').toggle('1000');
icon = $(this).find("i");
icon.toggleClass("icon-circle-arrow-up icon-circle-arrow-down")
})
Si .la bascule n'est pas de travail, je le ferais la prochaine:
var flag = false;
$('#click_advance').click(function(){
if( flag == false){
$('#display_advance').show('1000');
// Add more code
flag = true;
}
else{
$('#display_advance').hide('1000');
// Add more code
flag = false;
}
}
C'est un peu plus de code, mais ça fonctionne
si votre icône est basée sur le texte du bloc (ligatures) plutôt que sur la classe du bloc, alors ce qui suit fonctionnera. Cet exemple utilise les icônes " + " et " - " de Google Material comme partie intégrante de MaterializeCSS.
<a class="btn-class"><i class="material-icons">add</i></a>
$('.btn-class').on('click',function(){
if ($(this).find('i').text() == 'add'){
$(this).find('i').text('remove');
} else {
$(this).find('i').text('add');
}
il fonctionne aussi pour jQuery post 1.9 où le basculement des fonctions a été déprécié.
Voici une façon très facile de le faire
$(function () {
$(".glyphicon").unbind('click');
$(".glyphicon").click(function (e) {
$(this).toggleClass("glyphicon glyphicon-chevron-up glyphicon glyphicon-chevron-down");
});
Espérons que cela aide :D