Javascript 交互式菜单无法在Jquery中滑回

我试着做一个互动菜单。它应该是这样工作的：

如果我点击菜单图标，导航将向下滑动到它工作的可见区域 然后，如果我再次单击菜单图标，导航将再次返回到不可见区域。 但第二步不起作用

$(document).ready(function(){
$(".menu-icon").click(function(){
    $("#navigation").animate({top: "40%"}),5000;
    $(this).addClass("menu-icon-active").removeClass("menu-icon");
});
$(".menu-icon-active").click(function(){
    $("#navigation").animate({top: "-40%"}),5000;
    $(this).addClass("menu-icon").removeClass("menu-icon-active");
});

})

有人知道如何创建它吗？

您可以通过在同一个单击处理程序中检查元素是否有活动类来解决问题，如果有，则取消激活它，如果没有，则激活它

下面是一个工作代码示例：

$(document).ready(function() {

    $(".menu-icon").click(function() {

        if ($(this).hasClass("menu-icon-active") ){

            // menu is active, deactivate it
             $("#navigation").animate({
                top: "10%"
            }), 5000;

            $(this).removeClass("menu-icon-active");

        } else {

            // menu is not active
            $("#navigation").animate({
                top: "30%"
            }), 5000;

            $(this).addClass("menu-icon-active");

        } 

    });
});

希望这有帮助

---

更新：jQuery提示：您不需要在菜单图标单击处理程序中添加或删除菜单图标类。这是不必要的，可能会给你意想不到的或错误的结果。[感谢用户@TJ指出这一点。]

我知道这一问题已经解决，但仅供参考，jQuery提供了解决这类问题的方法：

$function{ $navigation.hide；//最初隐藏 $.menu icon.onclick，函数{ $navigation.slideToggle； $this.toggleClass'active'； } } .active{颜色：绿色} 项目 项目 项目 项目

---

你为什么要添加/删除类菜单图标？@TJ你是对的，没有必要。我在粘贴原始作者代码时，仔细看了一下。将更新我的答案