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

本文介绍了如何在点击时切换字体真棒图标？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

HTML

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