web-dev-qa-db-ja.com

オンザフライでjqueryを使用してフォントの素晴らしいアイコンを変更する

navigational menu を作成しましたが、それらの一部にはサブメニューがあります。ユーザーがそのメニュー項目をクリックするとfa-chevron-down（下矢印アイコン）のメニュー項目をfa-chevron-up（上矢印アイコン）に変更し、他の場所をクリックすると元に戻るようにしたいさらに、私は2つの要求も持っています。

1）私はjqueryに非常に慣れていないので、私が書いたjqueryコードはうまくいくようですが、もっと良い方法はありますか？ （1つのメニュー項目が2回クリックされると、スライドが2回行われることに注意してください。そのANNOYING）

2）ユーザーがウィンドウのサイズを変更すると、html要素は所定の位置にとどまらず、散らばります。

前もって感謝します。

jsfiddleデモ

UPDATE：問題を解決していただきありがとうございます。私は問題をさらに改善し、それは完全に機能しています。これが最後です**[〜＃〜] jsfiddle [〜＃〜] **

javascriptjqueryhtmlcssfont-awesome
14
Arin Chakraborty

アイコンを変更するには、クリックイベントで次のように簡単に行うことができます。

$(this).find($(".fa")).removeClass('fa-chevron-down').addClass('fa-chevron-up');

詳細については、jsfiddleの例をご覧ください。

jsfiddleの例

23
Armen

クラスを変える必要はないと思います。

クラスを切り替えるのではなく、fa-chevron-downをfa-chevron-upに変更するだけの場合は、fa-rotate-180にtoggleClassを使用します。 fa-rotate-180はアイコンを回転させ、目的を解決する可能性があります。個々のクラスを追加/削除する必要はありません。

まあ言ってみれば：

$('selector').click(function(){
    $('menu-selector').toggleClass('fa-rotate-180');    
});

単なるサンプルです。あなたはそれを回避することができます。

10
K K

Font Awesome v5では、状況がかなり変更されています。

これは、Bootstrap、JQuery、およびFontAwesomeで動作するプラス/マイナスの折りたたみボタンを取得するために使用したコードです。

HTML：

<a class="btn btn-collapse" id="btn-collapse" data-toggle="collapse" data-target="#collapse-section"><i class="fas fa-minus"></i></a>

JQueryスクリプト：

$("#btn-collapse").click(function() {
    if ($(this).hasClass('collapsed')) {
        $(this).find('svg').attr('data-icon', 'minus');
    } else {
        $(this).find('svg').attr('data-icon', 'plus');
    }
});

シェブロンの上下をプラス/マイナスで置き換えることができるはずです。

3
Dagmar