it-swarm.com.de

Wie kann ich das Symbol für die beeindruckende Schrift beim Klicken umschalten?

Ich verwende das großartige Plus-Symbol für erweiterbare Kategorienlistenelemente. Wenn sie im erweiterten Zustand sind, möchte ich ein Minuszeichen anzeigen

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

34
Orahmax

Sie können die Klasse des i -Elements innerhalb des angeklickten Ankers wie folgt umschalten

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

dann

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

Demo: Geige

73
Arun P Johny

Rufen Sie einfach jQueries toggleClass() für das i -Element in Ihren a -Elementen auf, um zwischen den Plus- und Minus-Symbolen umzuschalten:

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

Beachten Sie, dass dies voraussetzt, dass eine Klasse von fa-plus-circle wird standardmäßig zu Ihrem i -Element hinzugefügt.

JSFiddle-Demo .

15
James Donnelly

Sie können den Code mithilfe der Klassendefinition für das i -Element ändern:

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

Dann können Sie die Klassen wechseln, die den Plus/Minus-Status darstellen, indem Sie toggleClass mit mehreren Klassen verwenden:

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

Demo: http://jsfiddle.net/Zcn2u/

2
Irvin Dominin

Generell und einfach funktioniert es so:

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

Es gibt eine andere Lösung, die Sie versuchen können, indem Sie nur das CSS verwenden. Hier ist die Antwort, die ich in einem anderen Beitrag gepostet habe: jQuery Accordion ändert die Schriftart in der Klasse der fantastischen Symbole beim Klicken

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>

// Abfrage

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

JSFiddle

0
Gangani Roshan