javascript - 如何在点击时切换 Font Awesome 图标？

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

您可以在单击的 anchor 中切换 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