Cambia icona al clic (attivazione/disattivazione)

Question

Ho un semplice script in jquery per attivare o disattivare un div (mostra e nascondi) quando si fa clic su <p> (sto utilizzando il 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'); 

});

Quindi, quando faccio clic per la prima volta l'icona cambia da basso a alto, ma ovviamente quando faccio clic su "click_advance" di nuovo l'icona non cambia indietro. Quindi voglio l'effetto toggle come lo show e hide; ma sono impeccabile su come farlo con un'icona.

Answer 1

Invece di sovrascrivere l'html ogni volta, basta attivare la classe.

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

Answer 2

Se .toggle non funziona vorrei fare il prossimo:

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

E 'un po' più codice, ma funziona

Answer 3

Prova questa:

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

o ancora meglio, come ha detto Kevin:

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

Answer 4

Se l'icona si basa sul testo nel blocco (legature) piuttosto che sulla classe del blocco, funzionerà quanto segue. Questo esempio utilizza le icone "+" e "-" di Google Material Icons come parte di MaterialiseCSS.

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

Funziona anche per JQuery post 1.9 in cui la commutazione di funzioni è stata deprecata.

Answer 5

Ecco un modo molto semplice di farlo

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

Spero che questo aiuti: D