菜单按钮动画中已弃用的jQuery.toggle（）函数的替代方法

Question

导航菜单按钮动画在我几年前建立的一个网站最近坏了，由于。toggle（）函数被弃用，我不知道用什么来替换代码，任何帮助将非常感谢！

这里有一个网站的链接（打开和关闭菜单的动画在右上方）:http://blackcurrent.co/#home

当您单击菜单按钮时，符号应该在菜单打开时动画化，然后当您单击同一按钮再次关闭它时，动画应该再次激发，但相反。

下面是jQuery:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#bespokeButton').toggle(
function(){
    jQuery("#segment1").removeClass('seg1ani2');
    jQuery("#segment1").toggleClass('seg1ani');
    jQuery("#segment2Container").removeClass('seg2Contani2');
    jQuery("#segment2Container").toggleClass('seg2Contani');
    jQuery("#segment3").removeClass('seg3ani2');
    jQuery("#segment3").toggleClass('seg3ani');
},
function(){
    jQuery("#segment1").removeClass('seg1ani');
    jQuery("#segment1").toggleClass('seg1ani2');
    jQuery("#segment2Container").removeClass('seg2Contani');
    jQuery("#segment2Container").toggleClass('seg2Contani2');
    jQuery("#segment3").removeClass('seg3ani');
    jQuery("#segment3").toggleClass('seg3ani2');
});
    });
</script>

我已经将。toggle（）函数改为。click（），正如您现在在网站上看到的，菜单按钮会像打开菜单时那样显示动画，但是当您再次单击关闭菜单时，它不会触发反向动画。

你知道我怎样才能让它再这样做吗？

非常感谢，

n

Answer 1

一种简单的方法是在按钮上切换类，并检查类是否存在。

function openMenu(){
    jQuery("#segment1").removeClass('seg1ani2');
    jQuery("#segment1").toggleClass('seg1ani');
    jQuery("#segment2Container").removeClass('seg2Contani2');
    jQuery("#segment2Container").toggleClass('seg2Contani');
    jQuery("#segment3").removeClass('seg3ani2');
    jQuery("#segment3").toggleClass('seg3ani');
}

function closeMenu(){
    jQuery("#segment1").removeClass('seg1ani');
    jQuery("#segment1").toggleClass('seg1ani2');
    jQuery("#segment2Container").removeClass('seg2Contani');
    jQuery("#segment2Container").toggleClass('seg2Contani2');
    jQuery("#segment3").removeClass('seg3ani');
    jQuery("#segment3").toggleClass('seg3ani2');
}


jQuery('#bespokeButton').click(function(e){
    if($(this).hasClass('open')){
      closeMenu()
    }else{
      openMenu()
    }
    $(this).toggleClass('open')
});