Javascript 如何更改我的js代码以使菜单正常工作

我的导航有点问题。我希望菜单从底部向上，单击汉堡后，选择其中一个选项后，向下滚动页面至选定的部分，然后隐藏。一切正常，直到我想再次使用导航-菜单隐藏后，我无法再次打开它。我应该如何更改代码以使其工作

$（'.home'）。在（'click'，函数（）{
$（'body，html'）。设置动画({
scrollTop:$（'.Home'）.offset（）.top
}, 500)
$（“菜单”）.addClass（“向下”）；
})
$（'.about'）。在（'click'，函数（）{
$（'body，html'）。设置动画({
scrollTop:$（'.About'）.offset（）.top
}, 500)   
$（“菜单”）.addClass（“向下”）；
})
$（'.gallery'）。在（'click'，函数（）{
$（'body，html'）。设置动画({
scrollTop:$（'.Gallery'）.offset（）.top
}, 500)
$（“菜单”）.addClass（“向下”）；
})
$（'.contact'）。在（'click'，函数（）{
$（'body，html'）。设置动画({
scrollTop:$（'Contact'）.offset（）.top
}, 500)
$（“菜单”）.addClass（“向下”）；
})
$（“.burger”）。在（“单击”，函数（）{
$（“.fas，菜单”）。切换类别（“关闭”）；
})

*{
填充：0；
保证金：0；
框大小：边框框；
}
导航{
位置：固定；
高度：100px；
宽度：100%；
填充：0 20px；
背景颜色：绿黄色；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
z指数：4；
}
.标志{
宽度：70px；
高度：70像素；
背景色：#fff；
z指数：5；
}
.汉堡{
宽度：70px；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
z指数：5；
}
汉堡一号{
颜色：#fff；
字体大小：20px；
}
.汉堡一号{
显示：无；
}
菜单{
位置：固定；
底部：-150%；
左：0；
高度：100vh；
宽度：100vw；
背景颜色：绿黄色；
过渡：.5s；
z指数：1；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
菜单关闭{
底部：0；
}
菜单下{
底部：-100%；
}
菜单a{
字体大小：20px；
填充：20px0；
字体系列：无衬线；
文字装饰：无；
颜色：#fff；
z指数：2；
}
.家{
位置：相对位置；
高度：100vh；
背景颜色：浅蓝色；
}
.关于{
高度：100vh；
背景色：丽贝卡紫；
}
.画廊{
高度：100vh；
背景色：番茄；
}
.联系方式{
高度：100vh；
背景色：卡德蓝；
}

航行

这就是它的工作原理。我删除了以下行：

$("menu").addClass("down"); 

因为它们不是必需的，而是添加了一个事件，用于在单击后隐藏菜单：

$(".Home a").on("click", function () {
  $(".Home menu").removeClass("off");
  $(".fas").toggleClass("off");
})

$（'.home'）。在（'click'，函数（）{
$（'body，html'）。设置动画({
scrollTop:$（'.Home'）.offset（）.top
}, 500)
//$（“菜单”）.addClass（“向下”）；
})
$（'.about'）。在（'click'，函数（）{
$（'body，html'）。设置动画({
scrollTop:$（'.About'）.offset（）.top
}, 500)   
//$（“菜单”）.addClass（“向下”）；
})
$（'.gallery'）。在（'click'，函数（）{
$（'body，html'）。设置动画({
scrollTop:$（'.Gallery'）.offset（）.top
}, 500)
//$（“菜单”）.addClass（“向下”）；
})
$（'.contact'）。在（'click'，函数（）{
$（'body，html'）。设置动画({
scrollTop:$（'.Contact'）.offset（）.top
}, 500)
//$（“菜单”）.addClass（“向下”）；
})
$（“.burger”）。在（“单击”，函数（）{
$（“.fas，菜单”）。切换类别（“关闭”）；
});
$（“.Home a”）。在（“单击”上，函数（）{
$（“.Home menu”）.removeClass（“关闭”）；
$（“.fas”）。切换类别（“关闭”）；
})

*{
填充：0；
保证金：0；
框大小：边框框；
}
导航{
位置：固定；
高度：100px；
宽度：100%；
填充：0 20px；
背景颜色：绿黄色；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
z指数：4；
}
.标志{
宽度：70px；
高度：70像素；
背景色：#fff；
z指数：5；
}
.汉堡{
宽度：70px；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
z指数：5；
}
汉堡一号{
颜色：#fff；
字体大小：20px；
}
.汉堡一号{
显示：无；
}
菜单{
位置：固定；
底部：-150%；
左：0；
高度：100vh；
宽度：100vw；
背景颜色：绿黄色；
过渡：.5s；
z指数：1；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
}
菜单关闭{
底部：0；
}
菜单下{
底部：-100%；
}
菜单a{
字体大小：20px；
填充：20px0；
字体系列：无衬线；
文字装饰：无；
颜色：#fff；
z指数：2；
}
.家{
位置：相对位置；
高度：100vh；
背景颜色：浅蓝色；
}
.关于{
高度：100vh；
背景色：丽贝卡紫；
}
.画廊{
高度：100vh；
背景色：番茄；
}
.联系方式{
高度：100vh；
背景色：卡德蓝；
}

航行

请清理html。 此外，使用锚。您不需要这些特定的类和动画函数。 您误用了

标记，顺便说一句，这是实验性的。 您还误用了

标记，如果不明显，它应该包含导航元素。 尽可能避免jQuery，如果可以使用普通javascript，它已经过时了。 我知道这不是预期的答案，但这很重要

航行

试试长安吧

$(".burger").on("click", function () {
    $(".fas, menu ").toggleClass("off");
    $('menu').removeClass("down");
})