菜单按钮动画中不推荐使用的jQuery .toggle函数的替代方法

问题描述

几年前，由于不建议使用.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

解决方法

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

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')
});