我在可擴展類別列表項目上使用了字體很棒的“加號”圖標。當它們處于展開狀態時，我想顯示一個“減號”

超文本標記語言

<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元素的類，如下所示

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

參見工作示例:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" >

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

只需對包含在a元素中的I元素調用jQuery的toggleClass()來切換加號和減號圖標:

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

請注意，這假設默認情況下將fa+circle類添加到I元素中。

JSFiddle演示。

您可以通過使用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/

一般來說，它是這樣工作的:

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

還有另一種解決方案，你可以只使用css來嘗試，這是我在另一篇文章中給出的答案:jQuery Accordion change font awesome icon class on click

//Jquery

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

JSFiddle