Javascript 非画布响应菜单-打开和关闭问题

我正在开发一个响应菜单，可以在水平格式（用于更宽的视口）和非画布菜单（用于更小的视口）之间切换

我完全理解这两种格式是为了在具有特定查看端口宽度的设备上查看，有些人可能会争辩说，人们在桌面上查看网站时通常不会调整浏览器窗口的大小；但是，我需要解决这个问题，因为客户认为这是一个问题

基本上，当浏览器宽度减小，以便在非画布模式下查看菜单，并且打开和关闭菜单时，如果随后调整浏览器窗口宽度，则菜单列表项（水平格式）将隐藏

我假设这是因为“closeNav”函数决定了“mySidenav”的宽度是0px。然而，我已经尝试了很多不同的解决方案（包括窗口大小调整功能，但都不起作用）

请任何人帮我解决这个问题

谢谢

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； } /*当用户单击按钮时， 在隐藏和显示下拉内容之间切换*/ 函数myFunction（）{ document.getElementById（“myDropdown”）.classList.toggle（“show”）； } //如果用户在下拉菜单外单击，请关闭下拉菜单 window.onclick=函数（事件）{ 如果（！event.target.matches（'.dropbtn'））{ var dropdowns=document.getElementsByClassName（“下拉内容”）； var i； 对于（i=0；i

*{
保证金：0；
填充：0；
}
html{
字体大小：100%；
}
身体{
字体系列：“Lato”，无衬线；
保证金：0；
填充：0；
}
李{
浮动：无；
列表样式类型：无；
}
#顶杆{
显示：块；
宽度：100%；
高度：53px；
背景色：#fff400；
}
/*图标以打开导航菜单*/
.汉堡{
字体大小：2.3rem；
颜色：#737171；
光标：指针；
位置：绝对位置；
z指数：1；
顶部：8px；
右：20px；
显示：块；
}
/*导航菜单容器*/
.侧导航{
宽度：0；
身高：100%；
位置：固定；
z指数：2；
排名：0；
右：0；
溢出x：隐藏；
过渡：0.5s；
}
/*导航菜单锚链接*/
.侧导航a{
文字装饰：无；
显示：块；
过渡：0.3s
}
/*关闭按钮*/
a、 关闭{
位置：绝对位置；
顶部：3px；
右：20px；
显示：块；
z指数：3；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
}
/*下拉式内容列表元素*/
.下拉列表内容li{
浮动：无；
}
/*显示下拉菜单（当用户单击下拉按钮时，使用JS将此类添加到.dropdown内容容器）*/
.show{display:block；}
@媒体屏幕和屏幕（最大高度：450像素）{
}
@媒体屏幕和屏幕（最小宽度：720px）{
李{
浮动：左；
列表样式类型：无；
}
/*图标以打开导航菜单*/
.汉堡{
显示：无；
}
/*导航菜单容器*/
.侧导航{
宽度：790px；
位置：固定；
z指数：1；
排名：0；
右：0px；
溢出x：可见；
}
/*导航菜单锚链接*/
.侧导航a{
显示：内联块；
过渡：0.3s；
}
/*关闭按钮*/
a、 关闭{
显示：无；
}
}
/*下拉按钮
.dropbtn{
边界：无；
光标：指针；
}*/
/*下拉列表中的链接
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
} */
/*更改悬停时下拉链接的颜色*/
.dropdown内容a:悬停{}
/*悬停时显示下拉菜单*/
.下拉：悬停。下拉内容，
.下拉：焦点.下拉内容{
显示：块；
}

调整窗口大小时，您需要删除在响应菜单栏上单击时添加的样式。您可以在这个问题中找到答案

---

您好，很抱歉回复太晚，谢谢您的回答，我最终解决了这个问题。不过，我还有另一个问题……我有一个固定的垂直点导航，当用户滚动到网站上的某个部分时，该导航会淡出，这样他们就可以看到有多少部分超过该点，并可以根据该点导航y、 如果用户随后向上滚动到页面顶部，导航将再次淡出。我创建了该网站，以便在具有较小视口（小于1024×宽）的设备上使用这种功能会发生变化，因此accordions中的部分会更容易让用户以这种格式导航，而固定点导航则会消失，因为不再需要它。我现在的问题是设备定位，换句话说，在iPad上测试时，在纵向视图中，该功能会工作，因此垂直点导航是隐藏的，但是，如果方向更改为横向，它会显示在页面上的任何位置，甚至在顶部，正如我所解释的，它应该隐藏，直到用户滚动到该部分。