当手风琴处于活动状态时旋转 FontAwesome “箭头”图标

Question

向我的手风琴添加一些图标，这些图标应该在手风琴处于活动状态时旋转。它们在激活时需要指向 DOWN，在关闭时需要指向 RIGHT。

使用 jQuery 的手风琴功能创建手风琴。

我使用了 FontAwesome 箭头。设法毫无问题地添加了它的旋转方面，但我遇到了另外两个问题：

1. 我可以使箭头可点击 + 它会旋转，但如果我点击 Accordion-box 本身它不会旋转
2. 将(".rotate") 更改为("#accordion")，但随后所有箭头都发生了变化，甚至标题/框都处于活动状态，而第二个则没有。

一开始我使用了以下 CSS：

.ui-accordion-icons .ui-icon::before{
    content: "▶";
}

.ui-accordion-header-active .ui-icon::before{
    content: "▼";
}

将图标作为“内容”添加到手风琴，并且切换工作正常，但我无法使用动画。

所以我开始改变它，并尝试让它与 jQuery 一起工作。

$(function () {
    //accordion
    $("#accordion").accordion({
        heightStyle: "content",
        active: false,
        collapsible: true,
    });
    
    $(".rotate").click(function(){
    if ($("#accordion").accordion("option", "active")) {
      $(".rotate").toggleClass("down"); 
    }
    })
});

#accordion {
    padding-top: 100px;
}

#accordion h3 {
    font-size: 24px;
    font-weight: bold;
    padding-left: 20px;
}

.ui-accordion-header {
    border: 1px solid grey;
    padding: 10px 20px;
}

.ui-accordion-content {
    padding: 10px 20px;
}

.ui-accordion-header-active {
    color: blue;
    border: 1px solid blue;
}

.arrow {
    margin-right: 20px;
}

.rotate{
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.rotate.down{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90def);
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

 <div id="accordion">
     <h3> <i class="fas fa-caret-right rotate arrow"></i> Section 1 </h3>
     
     <div>
         <p>
            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque 
            lobortis. Phasellus pellentesque purus in massa. Aenean.
           </p>
      </div>  
      
      <h3><i class="fas fa-caret-right rotate arrow"></i> Section 2 </h3>
       
      <div>
        <p>
          Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque 
          lobortis. Phasellus pellentesque purus in massa. Aenean in pede.
        </p>
      </div>

还有没有办法用content 制作动画（基本上从向右旋转到向下）？如果没有，我如何修复 FontAwesome 的 jQuery 代码，以便在手风琴选项卡处于活动状态和不处于活动状态时正常工作？

Answer 1

使用active state 到transform icon

.ui-state-active .fas{
   -moz-transform:rotate(90deg);
   -webkit-transform:rotate(90deg);
   transform:rotate(90def);
}

我修改的代码：

$(".rotate").click(function(){
    if ($("#accordion").accordion("option", "active")) {
      $(".rotate").toggleClass("down"); 
    }
  })

到：

//Clicked on the h3 element
$("h3").click(function(){       
   //$(this) refer to the h3 clicked, so we find the .rotate (icon) and toggle the class "down"    
   $(this).find('.rotate').toggleClass("down");       
   //we remove the class down from all the .rotate icons
   $('.rotate').removeClass("down"); 
})

为什么？

每次单击$('.rotate').click(); 时都会调用 icon (.rotate) 但这不是我们想要的。
$('h3').click() 更适合触发每个点击 "Accordeon" 因为在所有 h3 空间上触发，而不仅仅是在 图标。

$(function () {
    //accordion
    $("#accordion").accordion({
        heightStyle: "content",
        active: false,
        collapsible: true,
    });
    
    $("h3").click(function(){      
      $(this).find('.rotate').toggleClass("down"); 
      $('.rotate').removeClass("down"); 
    })
});

#accordion {
    padding-top: 100px;
}

#accordion h3 {
    font-size: 24px;
    font-weight: bold;
    padding-left: 20px;
}

.ui-accordion-header {
    border: 1px solid grey;
    padding: 10px 20px;
}

.ui-accordion-content {
    padding: 10px 20px;
}

.ui-accordion-header-active {
    color: blue;
    border: 1px solid blue;
}

.arrow {
    margin-right: 20px;
}

.rotate{
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.rotate.down{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90def);
}
.ui-state-active .fas{-moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90def);}

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

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

 <div id="accordion">
     <h3> <i class="fas fa-caret-right rotate arrow"></i> Section 1 </h3>
     
     <div>
         <p>
            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque 
            lobortis. Phasellus pellentesque purus in massa. Aenean.
           </p>
      </div>  
      
      <h3><i class="fas fa-caret-right rotate arrow"></i> Section 2 </h3>
       
      <div>
        <p>
          Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque 
          lobortis. Phasellus pellentesque purus in massa. Aenean in pede.
        </p>
      </div>