Javascript 如何在单击时切换字体图标？

我正在可扩展类别列表项上使用字体“plus”图标。当它们处于展开状态时，我想显示一个“减号”

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>

---

您可以在单击的锚点中切换

i

元素的类

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

演示：

只需在

a

元素中包含的

i

元素上调用jQuery，即可切换加号和减号图标：

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

注意，这假设默认情况下，

fa加上圆圈的类被添加到
i
元素中

.
您可以使用
i
元素的类定义来更改代码：

<a href="javascript:void"><i class="fa fa-plus-circle"></i>Category 1</a>

演示：
有另一个解决方案，您可以只使用css来尝试。下面是我在另一篇文章中发布的答案：
一般来说，它的工作原理如下：



$（文档）.ready（函数（）{
$（'i'）。单击（函数（）{
$（this.toggleClass（'fa-plus-square-fa-减号square'）；
});
});

您必须从
中删除一个类，然后添加另一个类。href的更改保持不变，但是对于MVC来说，如果一个调用视图显示的内容菜单图标没有更改（或者更确切地说，它会更改并刷新回原始状态）。如何让它持续下去？有效的示例
以及以下4年后无效的示例（仍然有用）：-）只需注意，如果使用svg图形，“i”元素将替换为“svg”，因此需要将toggleClass应用于$（this）。find（'svg'））如果你只有一行的话，就不用“我”了。但是，如果您有多行，则会出现问题。单击一个图标并更改图标（确定）。如果单击另一个图标，则第一个图标的图标不会重置为初始值。有什么办法防止这种情况发生吗？Thanks@Adyyda那是另一个愿望。如果要关闭第一个列表并将第一个图标更改回正常状态，它应该为该事件调用相同的函数（关闭列表）。这个解决方案只是暂时的，它是超级手动的，用户可能会同时打开很多列表。
...click(function() {
    $(this).find('i').toggleClass('fa-minus-circle fa-plus-circle');
});

<a href="javascript:void"><i class="fa fa-plus-circle"></i>Category 1</a>

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

<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>

$(document).ready(function() {
    $('li').click(function() {
      $('i').toggleClass('fa-plus-square fa-minus-square');
    });
  });