web-dev-qa-db-fra.com

Comment faire basculer l'icône géniale de la police sur un clic?

J'utilise l'icône générique 'plus' de police géniale sur les éléments de liste de catégories extensibles. Quand ils sont dans un état développé, je veux montrer un signe 'moins'

HTML 

<ul id="category-tabs">
    <li><a href="javascript:void"><i class="fa fa-fw"></i>Category 1</a>
        <ul>
            <li><a href="javascript:void">item 1</a></li>
            <li><a href="javascript:void">item 2</a></li>
            <li><a href="javascript:void">item 3</a></li>
        </ul>
    </li>
</ul>

Jquery

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
});

enter image description here

javascriptjqueryhtmlcssonclick
34
Orahmax

Vous pouvez basculer la classe de l’élément i dans l’ancre sur laquelle vous avez cliqué, comme ceci:

<i class="fa fa-plus-circle"></i>

puis

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});

Démo: Violon

73
Arun P Johny

Appelez simplement toggleClass() de jQuery sur l'élément i contenu dans vos éléments a pour basculer entre les icônes plus et moins:

...click(function() {
    $(this).find('i').toggleClass('fa-minus-circle fa-plus-circle');
});

Notez que cela suppose qu'une classe de fa-plus-circle est ajouté à votre élément i par défaut.

démonstration de JSFiddle .

15
James Donnelly

Vous pouvez changer le code en utilisant la définition de classe pour l'élément i:

<a href="javascript:void"><i class="fa fa-plus-circle"></i>Category 1</a>

Ensuite, vous pouvez changer les classes représentant l’état plus/moins en utilisant toggleClass avec plusieurs classes:

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
});

Démo: http://jsfiddle.net/Zcn2u/

2
Irvin Dominin

Généralement et simplement cela fonctionne comme ceci:

<script>
            $(document).ready(function () {
                $('i').click(function () {
                    $(this).toggleClass('fa-plus-square fa-minus-square');
                });
            });
</script>
1
JMJ

Il existe une autre solution que vous pouvez essayer en utilisant uniquement le css. Voici la réponse que j’ai postée dans un autre article: jQuery Accordion changez de police, icône génial classe sur clic

0
emilushi
<ul id="category-tabs">
    <li><a href="javascript:void"><i class="fa fa-plus-circle"></i>Category 1</a>
        <ul>
            <li><a href="javascript:void">item 1</a></li>
            <li><a href="javascript:void">item 2</a></li>
            <li><a href="javascript:void">item 3</a></li>
        </ul>
    </li> </ul>

// Jquery

$(document).ready(function() {
    $('li').click(function() {
      $('i').toggleClass('fa-plus-square fa-minus-square');
    });
  });

JSFiddle

0
Gangani Roshan