クリック時のアイコンの変更（トグル）

Question

<p>がクリックされたとき（表示され、非表示になる）jqueryの簡単なスクリプトが表示されます（私はブートストラップを使用しています）。

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

}）。

初めてアイコンをクリックするとアイコンが下から上に変わりますが、もう一度「click_advance」をクリックするとアイコンが元に戻りません。だから私は、ショーのようなトグル効果と非表示を望んでいます。私はアイコンを使ってそれを行う方法については戸惑う。

Answer 1

毎回htmlを上書きするのではなく、クラスを切り替えるだけです。

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

Answer 2

.toggleは、私は、次の操作を行います動作しない場合：

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

それは少しより多くのコードだが、それは

Answer 3

はこの試し作品：

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

を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

あなたのアイコンがブロックのクラスではなくブロック（合字）のテキストに基づいている場合は、次のように動作します。この例では、Google Material Icons '+'と ' - 'アイコンをMaterializeCSSの一部として使用しています。

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

また、JQueryポスト1.9では機能のトグルが廃止されました。

Answer 5

はここ

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

ホープ、このことができますことをやって、非常に簡単な方法です：D