Question

您好，我正在一个wordpress网站上工作，试图在网站菜单上的2个元素中停止以下CSS动画的点击（如果第二次点击不执行任何操作）。

菜单中的HTML是

<div>

<div class="header-item bb-header-user-box bb-toggle pos-right">
    <a class="bb-header-icon logged-in-user element-toggle only-mobile" role="button" data-toggle=".bb-header-user-box .menu" href="http://www.website.com/profile/">
        <img alt="" src="http://www.website.com/wp-content/uploads/avatars/35/5ea8283bc5098-bpfull.jpg" srcset="http://www.website.com/wp-content/uploads/avatars/35/5ea8283bc5098-bpfull.jpg 2x" class="avatar avatar-150 photo" width="150" height="150"></a>
</div>

<a class="h-icon header-item create-post pos-right" href="http://www.website.com/create-article/"><span>Write article</span></a>

</div>

并且在类上有CSS动画

.create-post {animation: pulse-blue 2s infinite;} 
.bb-header-icon.logged-in-user.element-toggle.only-mobile img{animation: pulse-red 2s infinite;}

我不想删除类，因为它们中有更多的CSS规则。我只想与另一个类创建一个toogle

.stop-animation {animation-play-state: paused;}

可以在用户单击元素并重定向页面并停止动画时触发它。

我试图在functions.php中执行类似的操作（例如，.create-post类），以便在头部添加脚本->

add_action( 'wp_head', 'stop_animation' );
function stop_animation(){
  ?>
 <script type="text/javascript">
$(document).ready(function(){
$(".create-post").click(function(){
 // It should add class stop-animation to element
 $(".create-post").toggleClass('stop-animation',true);
  });
});
 </script>
   <?php
  }

但似乎不起作用。我对js和jQuery不太满意，我不确定自己在做什么错。任何帮助将不胜感激。

Ps。网站正在运行默认的jQuery。

Answer 1

仅使用 toggleClass（）

 $(".create-post").toggleClass('stop-animation');

在wordpress中切换类

1 个答案: