我想制作一个点击后自行旋转的按钮

Question

我想制作一个点击后会自行旋转的按钮。该按钮有一个动态名称（id、class）。单击它时，它会显示或隐藏 wordpress 帖子的一部分。当帖子展开时，我希望它向上，向下包裹时。

<div>
    <div class="button_wrap" id="opis<?php echo get_the_ID()?>"> <button class="button" type="button" id="button<?php echo get_the_ID()?>"></button> </div>
</div>
<script>
    $("#button<?php echo get_the_ID()?>").click(function() {
        $("#opis<?php echo get_the_ID()?>").slideToggle(1000);
    });
</script>

CSS

.button_wrap {
    width: 100%;
    height: 80px;
    text-align: center;
}
.button {
    background: url(/arrow.svg) no-repeat;
    margin-top: 20px;
    cursor: pointer;
    height: 50px;
    width: 75px;
    border: none;
    transition: .3s ease;
    padding-bottom: 5px;
}
.button:hover {
    background: url(/arrow.svg) no-repeat;
    color: red;
    cursor: pointer;
    height: 50px;
    width: 75px;
    border: none;
    transition: .3s ease;
    margin-top: 13px;
}
.opisy {
    display: none;
}

我相信我必须向按钮添加一个 css 类，但我必须在第二次单击后将其删除。我有点迷茫，也许有更简单的方法？

Answer 1

最简单的方法。

$('.btn').click(function(){
  $(this).toggleClass('rotate');
});

.btn {
  transition: all 1s ease-in;
}

.rotate {
  transform: rotate(360deg);
  transition: all 1s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn'>content</button>