Question

向我的手风琴中添加一些图标，这些图标应在手风琴启动时旋转。他们需要在活动时指向DOWN，在关闭时指向RIGHT。

创建手风琴是通过jQuery的手风琴功能完成的。

我使用了FontAwesome箭头。设法添加了旋转方面没有问题，但我遇到了另外两个问题：

我可以使箭头可单击+它将旋转，但是如果我单击“手风琴”框本身就不会旋转
将(".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();   图标（.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>

手风琴启用时旋转FontAwesome“箭头”图标

1 个答案:

我修改的代码：

收件人：

为什么？