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

【问题标题】：How to toggle font awesome icon on click?如何在点击时切换字体真棒图标？
【发布时间】：2014-06-09 14:23:07
【问题描述】：

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

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

【问题讨论】：

您必须从<i> 中删除一个类并添加另一个类。

标签： javascript jquery html css onclick

【解决方案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')
});

演示：Fiddle

【讨论】：

使用 href 的更改保持不变，但是对于 MVC 来说，如果一个调用视图显示菜单图标没有更改（或者更确切地说它更改并刷新回原始内容）。如何让它坚持下去？有效的示例
Check or Uncheck
检查或取消选中

4 年后仍然有用 :-) 只是要注意，如果您使用的是 svg 图形，“i”元素将被替换为“svg”，因此需要应用 toggleClass到 $(this).find('svg') 而不是 'i'

【解决方案2】：

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

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

请注意，这假定默认情况下将 fa-plus-circle 类添加到您的 i 元素中。

JSFiddle demo.

【讨论】：

【解决方案3】：

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

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

然后您可以使用toggleClass 与多个类切换表示加/减状态的类：

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

演示：http://jsfiddle.net/Zcn2u/

【讨论】：

【解决方案4】：

一般来说，它的工作原理是这样的：

<script>
            $(document).ready(function () {
                $('i').click(function () {
                    $(this).toggleClass('fa-plus-square fa-minus-square');
                });
            });
</script>

【讨论】：

如果您只有一行，这可以正常工作。但是，如果您有多行
@Adyyda 这是一个不同的愿望。如果您想关闭第一个列表并将第一个图标改回正常状态，它应该为该事件调用相同的函数（关闭列表）。这里的解决方案只是在它是超级手动的时候，这个人可能会同时打开很多列表。

【解决方案5】：

您可以尝试仅使用 css 的另一种解决方案，这是我在另一篇文章中发布的答案：jQuery Accordion change font awesome icon class on click

【讨论】：

【解决方案6】：

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

//jquery

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

JSFiddle

【讨论】：