javascript - JS : change icon in div on Bootstrap collapse?

Question

好的，我已经尝试了几种方法(JS 和 CSS)，但我无法让它工作。当一个 div 通过 Bootstrap 折叠时，我需要将一个加号 Font Awesome 图标更改为一个减号(即添加一个新的 div 代替另一个或只更改 div 的类)。

我看过类似的问题，但终究无法解决。

这是我的 html:

<div class="panel-heading" role="tab" id="headingOne">

                              <h4 class="panel-title">

                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i><span style="margin-left: 12px; display: inline-block;"></span>Lab Focus: Cloud Management with vRealize Operations & <nobr>vRealize Automation</nobr></a>

                              </h4>

                            </div>


                            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

                                  <div class="panel-body">

                                      <span style="font-family:'proximanova-light', sans-serif;font-size:15px; line-height:19px; text-align:left; color: #565656;">

                                      <p>Deliver intelligent operations management across physical, virtual, and cloud infrastructures and accelerate the deployment and management of applications and compute services, improving business agility and operational efficiency.</p>

当我点击 div 并打开时(它是一个 Accordion div)我需要将 fa-plus-square-o 更改为 fa-minus-square-o 然后在 div 折叠时再次返回。因为我有其中的 8 个，所以我尝试使用 JS 和 this:

     $(".collapsed").click(function() {
                    console.log("panel clicked");
                   var downPanel = "";
    $(this).html(downPanel);
                   $('.fa-plus-square-o', this).remove();
$('.fa-plus-minus-o', this).add();
                            });

还有其他几个变体，但没有任何效果。然后我尝试使用 CSS 将类更改为 collapsed1:

.collapsed1 .fa-minus-square-o,
.collapsed1.collapsed .fa-minus-square-o {
    display: inline-block;
}
.collapsed1.collapsed .fa-plus-square-o,
.collapsed1 .fa-plus-square-o {
    display: none;
}

然而，这会导致一直显示减号或两个图标。我是 JS 新手，需要一些帮助。

如何根据 div 是否折叠来更改图标？

Answer 1

只需切换类:

$('.collapsed').on('click', function() {
 $(this).find('i')
   .toggleClass('fa-minus-square-o')
   .toggleClass('fa-plus-square-o')
});