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

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

演示:小提琴

Answer 2

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

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

请注意,这假定默认情况下会将一类fa-plus-circle添加到i元素中.

JSFiddle演示.