jQuery slidetoggle 旋转动画

Question

我的 jQuery 函数有问题。我想要一个 slidetoggle ，它将动画化滑动切换文本旁边的箭头旋转。现在箭头旋转动画只在第一次播放时播放，它也没有动画旋转回来(当 slidetoggle 关闭时)

我刚开始学习网络编程，但我找不到问题的答案，所以我很高兴能得到每一个帮助。

当列表关闭时那个箭头没有向后旋转

$(1.2.html).ready(function() {
  $("click").click(function() {
    $("ul").slideToggle("slow");
    $(".arrow").animate({
      deg: 180,
    }, {
      speed: "slow",
      step: function(now) {
        $(this).css({
          transform: 'rotate(' + now + 'deg)'
        })
      }
    });
  })
});

.arrow {
  float: right;
}

p {
  float: left;
}

ul {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
  <div class="click">
    <p>Toggle</p>
    <img class="arrow">
  </div>
  <ul>
    <li>hidden1</li>
    <li>hidden2</li>
  </ul>
</div>

Answer 1

$('document').ready(function() {
  $(".click").click(function() {
    $("ul").slideToggle("slow");
    $('.arrow').toggleClass('goLeft')
  })
});

.arrow {
  float: right;
   transition : all 0.8s ease-in
}

p {
  float: left;
}

ul {
  display: none;
}
.goLeft {
  -webkit-transform:rotate(180deg);
   transition : all 0.8s ease-in
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
  <div class="click">
    <p>Toggle</p>
    <img class="arrow" src="https://img.icons8.com/carbon-copy/2x/arrow.png">
  </div>
  <ul>
    <li>hidden1</li>
    <li>hidden2</li>
  </ul>
</div>

这为您完成，也在 codepen 上 https://codepen.io/abeshi-emmanuel/pen/eYOZREY