Javascript 在网站上显示和隐藏导航按钮？

我想用相同的按钮隐藏和显示导航栏。我在互联网站上复制了一些代码片段，并用一个自定义的动画按钮打开了导航，但仍然有一个专用的关闭按钮。如何将关闭功能映射到打开导航的同一按钮

多谢各位

PS：如果你能告诉我要改变什么，那么导航是从右边来的，而不是左边，我将非常感激

/*要交叉的条形动画条*/
函数myFunction（x）{
x、 切换（“更改”）；
}
/*将侧导航的宽度设置为250px*/
函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“500px”；
}
/*将侧边导航的宽度设置为0*/
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}

/*标题*/
/*使用灰色背景和一些填充设置标题样式*/
.标题{
溢出：隐藏；
背景色：#FFFFFF；
填充顶部：40px；
右边填充：10px；
左侧填充：10px；
填充底部：50px；
盒影：0 4px 5px 0 rgba（0,0,0,0.2）；
}
/*设置标题链接的样式*/
.标题a{
浮动：左；
颜色：黑色；
文本对齐：居中；
填充顶部：12px；
右侧填充：12px；
左侧填充：12px；
垫底：12px；
文字装饰：无；
字体系列：lato；
字号：18px；
线高：25px；
边界半径：4px；
}
.菜单栏图标{
显示：内联块；
光标：指针；
}
.bar1，
.bar2，
.bar3{
宽度：20px；
高度：2倍；
背景色：#000000；
保证金：4px0；
过渡：0.4s；
}
/*旋转第一根杆*/
.找零{
-webkit变换：旋转（-45度）平移（-4px，3px）；
变换：旋转（-45度）平移（-4px，3px）；
}
/*淡出第二条*/
.找零{
不透明度：0；
}
/*旋转最后一条*/
.找零{
-webkit变换：旋转（45度）平移（-5px，-4px）；
变换：旋转（45度）平移（-5px，-4px）；
}
/*侧边导航菜单*/
.侧导航{
高度：90px；
/*100%全高*/
宽度：0；
/*0宽度-使用JavaScript更改此宽度*/
位置：固定；
/*原地不动*/
z指数：1；
/*保持领先*/
排名：0；
/*保持领先*/
左：70%；
溢出x：隐藏；
/*禁用水平滚动*/
填充顶部：50px；
/*将内容从顶部放置60像素*/
过渡：0.5s；
/*在sidenav中滑动的0.5秒过渡效果*/
}
/*导航菜单链接*/
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：15px；
颜色：#000000；
显示：块；
过渡：0.3s；
}
/*将鼠标悬停在导航链接上时，请更改其颜色*/
.侧导航a:悬停{
颜色：#E20105；
}
/*关闭按钮的位置和样式（右上角）*/
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
/*样式页面内容-如果要在打开侧导航时将页面内容向右推，请使用此选项*/
#主要{
过渡：左边距。5s；
填充：20px；
}
/*在高度小于450px的较小屏幕上，更改sidenav的样式（更少的填充和更小的字体大小）*/
@媒体屏幕和屏幕（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
}
/*设置徽标链接的样式（请注意，我们设置了相同的行高和字体大小值，以防止字体变大时页眉增加*/
.标题a.标志{
字体大小：130px；
字体大小：粗体；
}
/*更改鼠标悬停时的背景色*/
.标题a：悬停{
背景色：#ddd；
颜色：黑色；
}
/*设置活动/当前链接的样式*/
.标题a.激活{
背景色：淡蓝色；
颜色：白色；
}
/*将链接部分向右浮动*/
.右标题{
浮动：对；
}
/*为响应性添加媒体查询-当屏幕宽度小于等于500px时，将链接堆叠在彼此的顶部*/
@媒体屏幕和屏幕（最大宽度：500px）{
.标题a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.右标题{
浮动：无；
}
}
#容器{
宽度：100%；
/*你的宽度*/
身高：100%；
/*你的身高*/
显示器：flex；
证明内容：中心；
/*这将使容器水平居中放置物品*/
对齐项目：居中；
/*这将使容器与项目垂直居中*/
/*轮廓：5px黄色虚线；
*/
}

您可以使用在css类之间切换，注意我删除了关闭函数和打开函数，并将宽度移动到css类

/*html，正文{
最大宽度：100%；
最大高度：100%；
溢出x：隐藏；
溢出y：隐藏；
}
#全身{
位置：绝对位置；
宽度：170%；
身高：100%；
溢出：可见；
背景：线性梯度(
110度，
#ffffff 50%，
#000000 50%);
轮廓：5px蓝色虚线；
}*/
/*标题*/
/*使用灰色背景和一些填充设置标题样式*/
.标题{
溢出：隐藏；
背景色：#FFFFFF；
填充顶部：40px；
右边填充：10px；
左侧填充：10px；
填充底部：50px；
盒影：0 4px 5px 0 rgba（0,0,0,0.2）；
}
/*设置标题链接的样式*/
.标题a{
浮动：左；
颜色：黑色；
文本对齐：居中；
填充顶部：12px；
右侧填充：12px；
左侧填充：12px；
垫底：12px；
文字装饰：无；
字体系列：lato；
字号：18px；
线高：25px；
边界半径：4px；
}
.菜单栏图标{
显示：内联块；
光标：指针；
位置：相对位置；
z指数：1；
}
.bar1、.bar2、.bar3{
宽度：20px；
高度：2倍；
背景色：#000000；
保证金：4px0；
过渡：0.4s；
}
/*旋转第一根杆*/
.找零{
-webkit变换：旋转（-45度）平移（-4px，3px）；
变换：旋转（-45度）平移（-4px，3px）；
}
/*淡出第二条*/
.找零{
o
window.addEventListener("load",function() {
  document.querySelector(".menu_bar_icon").addEventListener("click",function() {
    this.classList.toggle("change");
    document.getElementById("mySidenav").style.width = this.classList.contains("change") ? "500px" : 0;
  })
})