Question

好的，我已经尝试了几种方法（JS和CSS），我无法让它工作。当div通过Bootstrap折叠时，我需要将一个加号字体真棒图标更改为减号（即添加一个新的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并打开它（它是一个手风琴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')
});

JS：在bootstrap崩溃中改变div中的图标？

1 个答案: