web-dev-qa-db-fra.com

Changer les icônes de police géniales en utilisant jquery à la volée

J'ai créé un navigational menu avec certains d'entre eux ayant des sous-menus. Je veux que le menuitem avec fa-chevron-down (icône de flèche vers le bas) devienne fa-chevron-up (icône de flèche vers le haut) lorsque l'utilisateur clique sur cet élément de menu et revienne en arrière lorsqu'il clique ailleurs. De plus, j'ai aussi deux demandes, 

1) Depuis que je suis très nouveau sur jquery, le code jquery que j’ai écrit semble être faire le tour mais y at-il un meilleur moyen? (remarquez quand un élément du menu est cliqué deux fois, le glissement a lieu deux fois. SON ANNOYING)

2) Lorsque l'utilisateur redimensionne la fenêtre, les éléments html ne restent pas en place. et se disperse.

Merci d'avance.

jsfiddle demo

UPDATE: Merci d'avoir résolu mon problème. J'ai affiné davantage mon problème et il fonctionne parfaitement. Voici le dernier **JSFIDDLE **

javascriptjqueryhtmlcssfont-awesome
12
Arin Chakraborty

Pour changer l'icône, vous pouvez facilement faire quelque chose comme ceci dans votre événement click:

$(this).find($(".fa")).removeClass('fa-chevron-down').addClass('fa-chevron-up');

pour plus jetez un oeil à l'exemple jsfiddle:

exemple jsfiddle

18
Armen

Je pense qu'il n'est pas nécessaire de changer de classe.

Si vous souhaitez uniquement modifier l'icône fa-chevron-down en fa-chevron-up au lieu de changer de classe, utilisez simplement toggleClass pour fa-rotate-180. fa-rotate-180 fera pivoter votre icône et cela pourrait vous aider. Pas besoin d'ajouter/supprimer des classes individuelles.

Disons:

$('selector').click(function(){
    $('menu-selector').toggleClass('fa-rotate-180');    
});

C'est juste un échantillon. Vous pouvez travailler autour de cela.

9
K K

Font Awesome v5 a beaucoup changé les choses. 

C'est le code que j'ai utilisé pour obtenir un bouton de réduction plus/moins fonctionnant avec Bootstrap, JQuery et FontAwesome.

HTML:

<a class="btn btn-collapse" id="btn-collapse" data-toggle="collapse" data-target="#collapse-section"><i class="fas fa-minus"></i></a>

Script JQuery:

$("#btn-collapse").click(function() {
    if ($(this).hasClass('collapsed')) {
        $(this).find('svg').attr('data-icon', 'minus');
    } else {
        $(this).find('svg').attr('data-icon', 'plus');
    }
});

Vous devriez pouvoir remplacer plus ou moins le chevron de haut en bas.

0
Dagmar