Javascript 如何在单击时切换菜单

我对JS和编码都是新手，只是不知道如何做我想让它做的事情；首先是我的代码（我仍然需要清理一下我的代码：P）

.header{
位置：相对位置；
高度：100vh；
宽度：100vw；
}
.英雄形象{
位置：相对位置；
背景：url（“../img/background image.jpg”）；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
宽度：100vw；
高度：100vh；
}
.英雄文本{
文本对齐：居中；
颜色：黑色；
}
.英雄文本按钮{
边界：无；
大纲：0；
显示：内联块；
填充：10px 25px；
颜色：黑色；
背景色：#ddd；
文本对齐：居中；
光标：指针；
}
.hero文本按钮：悬停{
背景色：#555；
颜色：白色；
}
/*菜单*/
.标题菜单{
位置：固定；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
背景色：#000；
z指数：-1；
}
.英雄文本{
宽度：100vw；
高度：100vh；
}
.hero-menu_切换{
证明内容：中心；
}
.hero-menu_滚动{
证明内容：中心；
}
.header\uuu菜单已展开{
z指数：99；
}
.米色{
背景色：#ffd39b；
}
.粉红{
背景色：#d0b2e4；
}
黄先生{
背景色：#FFDE03；
}
蓝先生{
背景色：#00B8D4；
} 
格林先生{
背景色：#1DE9B6；
}
布莱克先生{
背景色：#4141；
}

菜单
从下面看柏林
查看更多

您可以在W3Schools网站上看到不同菜单样式的示例

请参阅所附的W3Schools代码片段：

身体{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
动画侧导航示例
单击下面的元素打开侧面导航菜单

☰ 打开
函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}

首先，您没有给我们您的JS。请把它添加到问题中。第二，不清楚你是如何让它工作的。试试这个例子“虽然这个链接可以回答这个问题，但最好在这里包括答案的基本部分，并提供链接供参考。”-StackOverflow经典。此外，任何像

use X

这样的通用答案在任何情况下都不太可能有帮助，尤其是当OP是该语言的新手时。