Question

我使用以下JQuery在点击时将css过渡插入元素...

$(".menu-item-4828 > a").click(function(){
    $(".sub-menu").css("visibility", "visible");
    $(this).css({
        "-webkit-transform": "rotate(180deg) scale(0)",
        "-moz-transform": "rotate(180deg) scale(0)",
        "transform": "rotate(180deg) scale(0)",
        "-webkit-transition": "-webkit-transform 0.3s ease-in", 
    });

然而，这只会在第一次点击时旋转，之后它不再旋转。我可以做些什么来使它在每次点击元素时旋转？

我尝试添加和删除课程，但这不起作用。

Answer 1

问题似乎是你将它旋转到180度，而不是旋转180度。每次您点击它时，都会将其设置为180度旋转。您需要找出它的当前轮换，添加180，然后将其设置为该新值。

Answer 2

尝试恢复旋转位置。在你的情况下，也许可以这样做（删除样式属性）：

    $(".menu-item-4828 > a").click(function(){
       $(".sub-menu").css("visibility", "visible");
       $(this).removeAttr('style').css({
           "-webkit-transform": "rotate(180deg) scale(0)",
           "-moz-transform": "rotate(180deg) scale(0)",
           "transform": "rotate(180deg) scale(0)",
           "-webkit-transition": "-webkit-transform 0.3s ease-in", 
       });
   )};

祝你好运：）

单击时如何进行多次旋转

2 个答案: