菜单按钮动画中不推荐使用的jQuery.thoggle()函数的替代方案

Question

我几年前创建的一个网站上的导航菜单按钮动画最近由于.thoggle((函数被弃用而中断，我无法确定用什么来替换代码，如果有任何帮助，我们将不胜感激！

这里有一个网站链接(打开和关闭菜单的动画位于右上角(：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>

我已经将.thoggle((函数更改为.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')
});