阅读更多点击时旋转的按钮

Question

我目前在一个网站上工作，我需要有一个“常见问题”部分。我只是用一个问题和一个图标来设计它，当您单击该问题的 div 时，就会出现答案。

我设法让答案看起来没有太多麻烦，但我错过了最后一个元素，“+”图标的旋转将变成“x”。

我无法旋转此图标并为其设置动画，我尝试了多种方法，但均无济于事。 我真的是一个开发初学者，尤其是涉及到 javascript。

我愿意接受任何可以帮助我的建议和技巧，在此先感谢

$(document).ready(function () {
    $(".content").hide();
    $(".show_hide").on("click", function () {
      $(this).next('.content').slideToggle(200);});
});

body{
font-family:helvetica}

.show_hide{
cursor:pointer;}

#text{
display:none;}

.btn-container{
  margin: auto;}

#icon{
border-radius:50%;
border:1px solid black;
padding:5px;
float:right;}

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


<section id="faq">
  <h2> Multiple questions</h2>
  
<hr>
<div class="show_hide" data-content="toggle-text">
  <big>This is a question ?</big>
  <i id="icon"class="fas fa-plus"></i>
</div>  

<div class="content">This is an answer.<br>This is an answer.<br>This is an answer.</div>

<hr>

<div class="show_hide" data-content="toggle-text">
  <big>This is a question ?</big>
  <i id="icon"class="fas fa-plus"></i>
</div>  

<div class="content">This is an answer.<br>This is an answer.<br>This is an answer. </div>
<hr>

Answer 1

在JS文件的点击事件内添加toggleClass()；然后在 CSS 文件中创建一个 active 类（或您选择的任何其他名称），该类通过 transform: rotate(45deg) 使其内容旋转 45 度。

另外，确保所有id 名称在single HTML document 中都是唯一的。在您的情况下，我认为最好将id="icon" 更改为"class="icon"，因为这是class 的假设。

$(document).ready(function () {
    $(".content").hide();
    $(".show_hide").on("click", function () {
      $(this).find('.icon').toggleClass('active');
      $(this).next('.content').slideToggle(200);
    });
});

body{
font-family:helvetica}

.show_hide{
cursor:pointer;}

#text{
display:none;}

.btn-container{
  margin: auto;}

.icon{
border-radius:50%;
border:1px solid black;
padding:5px;
float:right;}

.icon.active {
   transform: rotate(45deg)
}

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


<section id="faq">
  <h2> Multiple questions</h2>
  
<hr>
<div class="show_hide" data-content="toggle-text">
  <big>This is a question ?</big>
  <i class="icon fas fa-plus"></i>
</div>  

<div class="content">This is an answer.<br>This is an answer.<br>This is an answer.</div>

<hr>

<div class="show_hide" data-content="toggle-text">
  <big>This is a question ?</big>
  <i class="icon fas fa-plus"></i>
</div>  

<div class="content">This is an answer.<br>This is an answer.<br>This is an answer. </div>
<hr>

Answer 2

引用图标时使用 fa-rotate-* 和 fa-flip-* 类。

 <i id="icon"class="fas fa-plus fa-rotate-90"></i>