如何在点击时切换字体真棒图标？

Question

我在可扩展类别列表项上使用字体真棒'加'图标。当他们处于扩张状态时，我想显示一个'减号''

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

Answer 1

您可以在点击的锚点中切换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')
});

演示：Fiddle

Answer 2

只需在i元素中包含的a元素上调用jQuery的toggleClass()即可切换加号和减号图标：

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

请注意，这假定默认情况下会向您的fa-plus-circle元素添加一类i。

JSFiddle demo

Answer 3

您可以使用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/

Answer 4

一般而言，它的工作原理如下：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

还有另一个解决方案，你可以尝试只使用css这里是我在另一篇文章中发布的答案：jQuery Accordion change font awesome icon class on click

Answer 6

<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