html - Accordion 动画中箭头图标的效果

Question

我已经将 Accordion 效果添加到我的元素中。为此，我添加了一些必须与 Accordion 一起制作动画的箭头。问题是我已经设法让箭头旋转，但这种效果应该只影响我单击的元素，而不是所有使用 Accordion 效果的元素。有人能帮我解决一下吗？

非常感谢

// Accordion javascript function with Jquery

$(document).ready(function(){
    $('.accordion-title').click(function() {
        $(this).toggleClass('open');

        $accordion_content = $(this).next('.accordion-content');
        $('.accordion-content').not($accordion_content).slideUp();
        $('.accordion-content').not($accordion_content).prev('.accordion-title').removeClass('open');
        $accordion_content.stop(true, true).slideToggle(400)

        $('.accordion-title i').toggleClass('rotate');
        


    });
});

.accordion-title {
  display: flex;
  align-items: center;
  cursor: pointer;

  .fas {
    font-size: 2rem;
    margin-right: 0.5rem;
  }
}


.rotate {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}



.accordion-content {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



    <div class="container">
        <div class="accordion-title">
            <i class="fas fa-chevron-right"></i>
            <h3 class="title is-3 has-white-color"> TEST 1 </h3>
        </div>
        <div class="accordion-content" style="display: none;"><p> test 1 </p>
        </div>
        <div class="accordion-title"><i class="fas fa-chevron-right"></i>
            <h3 class="title is-3 has-white-color"> TEST 2 </h3></div>
        <div class="accordion-content"><p> test 2 </p>
        </div>
    </div>

Answer 1

您可以通过类 accordion-title 和状态类 open 来管理图标旋转效果

// Accordion javascript function with Jquery

$(document).ready(function(){
    $('.accordion-title').click(function() {
        $(this).toggleClass('open');

        $accordion_content = $(this).next('.accordion-content');
        $('.accordion-content').not($accordion_content).slideUp();
        $('.accordion-content').not($accordion_content).prev('.accordion-title').removeClass('open');
        $accordion_content.stop(true, true).slideToggle(400)

        // Remove this handle
        //$('.accordion-title i').toggleClass('rotate');
    });
});

.accordion-title {
  display: flex;
  align-items: center;
  cursor: pointer;

  .fas {
    font-size: 2rem;
    margin-right: 0.5rem;
  }
}
.accordion-title i {
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.accordion-title.open i {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}



.accordion-content {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



    <div class="container">
        <div class="accordion-title">
            <i class="fas fa-chevron-right"></i>
            <h3 class="title is-3 has-white-color"> TEST 1 </h3>
        </div>
        <div class="accordion-content" style="display: none;"><p> test 1 </p>
        </div>
        <div class="accordion-title"><i class="fas fa-chevron-right"></i>
            <h3 class="title is-3 has-white-color"> TEST 2 </h3></div>
        <div class="accordion-content"><p> test 2 </p>
        </div>
    </div>