web-dev-qa-db-ja.com

クリック時にフォントの素晴らしいアイコンを切り替える方法は？

拡張可能なカテゴリリストアイテムでフォントの素晴らしい「プラス」アイコンを使用しています。それらが展開状態にあるとき、「マイナス」記号を表示したい

HTML

<ul id="category-tabs">
    <li><a href="javascript:void"><i class="fa fa-fw"></i>Category 1</a>
        <ul>
            <li><a href="javascript:void">item 1</a></li>
            <li><a href="javascript:void">item 2</a></li>
            <li><a href="javascript:void">item 3</a></li>
        </ul>
    </li>
</ul>

Jquery

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
});

enter image description here

javascriptjqueryhtmlcssonclick
34
Orahmax

クリックしたアンカー内のi要素のクラスを切り替えることができます

<i class="fa fa-plus-circle"></i>

それから

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});

デモ： フィドル

73
Arun P Johny

i要素に含まれるa要素でjQueryの toggleClass() を呼び出すだけで、プラスアイコンとマイナスアイコンのいずれかを切り替えることができます。

...click(function() {
    $(this).find('i').toggleClass('fa-minus-circle fa-plus-circle');
});

これは、fa-plus-circleのクラスがデフォルトでi要素に追加されることを前提としていることに注意してください。

JSFiddle demo .

15
James Donnelly

i要素のクラス定義を使用して、コードを変更できます。

<a href="javascript:void"><i class="fa fa-plus-circle"></i>Category 1</a>

次に、複数のクラスでtoggleClassを使用して、プラス/マイナス状態を表すクラスを切り替えることができます。

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
});

デモ： http://jsfiddle.net/Zcn2u/

2
Irvin Dominin

一般的かつ簡単に次のように機能します。

<script>
            $(document).ready(function () {
                $('i').click(function () {
                    $(this).toggleClass('fa-plus-square fa-minus-square');
                });
            });
</script>
1
JMJ

ここでCSSのみを使用して試すことができる別の解決策があります：私は別の投稿に投稿された答えです： jQuery Accordionはクリック時に素晴らしいアイコンクラスを変更します

0
emilushi
<ul id="category-tabs">
    <li><a href="javascript:void"><i class="fa fa-plus-circle"></i>Category 1</a>
        <ul>
            <li><a href="javascript:void">item 1</a></li>
            <li><a href="javascript:void">item 2</a></li>
            <li><a href="javascript:void">item 3</a></li>
        </ul>
    </li> </ul>

// Jquery

$(document).ready(function() {
    $('li').click(function() {
      $('i').toggleClass('fa-plus-square fa-minus-square');
    });
  });

JSFiddle

0
Gangani Roshan