38

a<p>がクリックされたときにdiv（表示と非表示）を切り替える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」をもう一度クリックしてもアイコンは元に戻りません。したがって、表示と非表示のようなトグル効果が必要です。しかし、アイコンでそれを行う方法がわかりません。

4

6 に答える 6

111

毎回 html を上書きする代わりに、クラスを切り替えるだけです。

$('#click_advance').click(function() {
    $('#display_advance').toggle('1000');
    $("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
});
于 2013-03-11T18:29:58.807 に答える
9

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

<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 でも機能します。

于 2015-12-13T18:55:13.227 に答える
7

これを試して：

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

ケビンが言ったように：

$('#click_advance').click(function(){
  $('#display_advance').toggle('1000');
  icon = $(this).find("i");
  icon.toggleClass("icon-circle-arrow-up icon-circle-arrow-down")
})
于 2013-03-11T18:30:35.663 に答える
4

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

それはもう少しコードですが、動作します

于 2013-03-11T18:30:17.757 に答える
1

ここにそれを行う非常に簡単な方法があります

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

これが役立つことを願っています:D

于 2016-05-13T12:57:49.253 に答える