Question

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

opponent_team = models.ForeignKey(
        Team, related_name="opponent_team", on_delete=models.CASCADE)

CSS

<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类，但是我必须在第二次点击后删除它。我有点失落，也许有一种更简单的方法吗？

Answer 1

最简单的方法imo。

$('.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>

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

1 个答案: