Javascript 使带箭头的引导4在打开和关闭时旋转90度

我试图让我的引导4手风琴箭头旋转90时打开或关闭。因此，从这个位置开始，当卡体打开时v。我用的是字体很棒的SVG。现在，当您仅在svg上单击时，它们会旋转90，关闭时不会向后旋转。我认为我采取了错误的方法，最好在svg处于任何一种状态时进行更改。i、 e.打开时使用内容：f078，关闭时使用内容：f064

下面是我的HTMl和我采用的Javascript方法。我理解javascript为什么不起作用，但我已经研究了许多不同的方法，它仍然不起作用

<div id="case-studies" class="container" style="padding-bottom: 50px; max-width: 960px; margin: auto;">
    <div class="container" style="max-width: 960px;">

        <!--Accordion wrapper-->
        <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">

            <!-- Accordion card -->
            <div class="card"
                style="border-top-right-radius: 0px; border-top-left-radius: 0px; border-top: 1px solid #D1C9C9; border-right: transparent; border-left: transparent;">

                <!-- Card header -->
                <div class="card-header" style="background-color: transparent" role="tab" id="headingOne1">
                    <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
                        aria-controls="collapseOne1">
                        <h5 class="mb-0" style="font-family: Source Sans Pro; font-size: 16px; font-weight: 400; color: black;">
                            <i class="fas fa-angle-right rotate" style="padding-right: 10px;"></i>Example 1  
                        </h5>
                    </a>
                </div>

                <!-- Card body -->
                <div id="collapseOne1" style="background-color: transparent" class="collapse" role="tabpanel"
                    aria-labelledby="headingOne1" data-parent="#accordionEx">
                    <div class="card-body" style="font-family: Source Sans Pro; font-size: 16px; font-weight: 300; background-color: transparent; margin-top: 10px; margin-left: 20px;">
                       Lorem Ipsum
                    </div>
                </div>

            </div>
            <!-- Accordion card -->

            <!-- Accordion card -->
            <div class="card"
                style="border-top: 1px solid #D1C9C9; border-right: transparent; border-left: transparent;">

                <!-- Card header -->
                <div class="card-header" style="background-color: transparent" role="tab" id="headingTwo2">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
                        aria-expanded="false" aria-controls="collapseTwo2">
                        <h5 class="mb-0" style="font-family: Source Sans Pro; font-size: 16px; font-weight: 400; color: black;">
                            <i class="fas fa-angle-right rotate" style="padding-right: 10px;"></i>Example 2
                        </h5>
                    </a>
                </div>

                <!-- Card body -->
                <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
                    data-parent="#accordionEx">
                    <div class="card-body" style="font-family: Source Sans Pro; font-size: 16px; font-weight: 300; background-color: transparent; margin-top: 10px; margin-left: 20px;">
                       Lorem Ipsum
                    </div>
                </div>
              </div>
            </div>


<script>
    $(".rotate").click(function(){
        $(this).toggleClass("down")  ; 
       })
    </script>
    

乱数假文
乱数假文
$（“.rotate”）。单击（函数（）{
$（this.toggleClass（“向下”）；
})

Javascript

var accordion = document.getElementsByClassName("accordion");

for (i=0;i<accordion.length;i++) {
  accordion[i].addEventListener("click", function() {
    this.classList.toggle("accordion-active");
  });
}

Javascript

var accordion = document.getElementsByClassName("accordion");

for (i=0;i<accordion.length;i++) {
  accordion[i].addEventListener("click", function() {
    this.classList.toggle("accordion-active");
  });
}