如何在点击时切换字体真棒图标？ [英] How to toggle font awesome icon on click?

问题描述

我在可展开的类别列表项目上使用字体超赞的'加'图标。当它们处于展开状态时，我想显示一个'减号'符号'

HTML

 < ul id =category-tabs> 
< li>< a href =javascript：void>< i class =fa fa-fw>< / i>类别1< / a& 
< ul> 
< li>< a href =javascript：void>第1项< / a>< / li> 
< li>< a href =javascript：void>第2项< / a>< / li> 
< li>< a href =javascript：void>第3项< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
  

Jquery
<点击（函数（）{
$（this）.next（'ul'）。slideToggle（'500'）pre> $（'＃category-tabs li a' ）;
}）;


我的类

 < i class =fa fa-plus-circle>中的code>元素。 < I> /; 
  

然后

  $（'＃category-tabs li a'）。click（function（）{
 $（this）.next（'ul'）。slideToggle（'500'）; 
 $ （this）.find（'i'）。toggleClass（'fa-plus-circle fa-minus-circle'）
}）; 
  

演示：小提琴

I am using font awesome 'plus' icon on expandable categories list items. When they are in expanded state i want to show a 'minus' sign'

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

解决方案

You can toggle the class of the i element within the clicked anchor like

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

then

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

Demo: Fiddle

这篇关于如何在点击时切换字体真棒图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！