ändert Symbol auf Klick (Toggle)

Question

Ich habe ein einfaches Skript in jquery ein div (Ein- und Ausblenden) zu wechseln, wenn ein <p> geklickt wird (ich bin mit 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'); 

});

Also, wenn ich zum ersten Mal auf das Symbol ändert sich von unten nach oben, aber offensichtlich, wenn ich auf „click_advance“ wieder das Symbol ändert sich nicht zurück. Also ich möchte den Toggle-Effekt wie beim ein- und ausblenden; aber ich weiß nicht, wie man das mit einem Icon macht.

Answer 1

Statt den HTML-Code jedes Mal überschreiben, schalten Sie einfach die Klasse.

$('#click_advance').click(function() { 
    $('#display_advance').toggle('1000'); 
    $("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down"); 
}); 

Answer 2

Wenn .toggle arbeitet nicht, dass ich das als nächstes tun würde:

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; 
    } 
} 

Es ist ein bisschen mehr Code, aber es funktioniert

Answer 3

Try this:

$('#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"); 
    } 
}) 

oder noch besser, als Kevin sagte:

$('#click_advance').click(function(){ 
    $('#display_advance').toggle('1000'); 
    icon = $(this).find("i"); 
    icon.toggleClass("icon-circle-arrow-up icon-circle-arrow-down") 
}) 

Answer 4

Wenn Ihr Symbol auf den Text in den Block (Ligatur) und nicht der Klasse des Blocks basiert dann funktioniert das folgende. In diesem Beispiel werden die Symbole "+" und "-" von Google Material Icons als Teil von MaterialiseCSS verwendet.

<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'); 
    } 

Es funktioniert auch für JQuery 1.9 veröffentlichen, wo Hin- und Herschalten von Funktionen aufgegeben.

Answer 5

Dies ist eine sehr einfache Art und Weise, dass

$(function() { 
    $(".glyphicon").unbind('click'); 
    $(".glyphicon").click(function (e) { 
     $(this).toggleClass("glyphicon glyphicon-chevron-up glyphicon glyphicon-chevron-down"); 
}); 

hoffe, das hilft zu tun: D