如何使用Javascript将切换设置为关闭？

试图避免jQuery-- 我的网站上有一个导航，当窗口调整大小时，它可以在标题栏和侧栏之间切换。我在切换侧边栏然后调整页面大小时遇到了一些问题。 如果切换侧栏并调整页面大小，则有两个问题：

如果我切换侧栏并展开页面，侧栏空间将保持切换状态，无法折叠

侧栏的内容不透明度将更改为0，除非我首先折叠侧栏，将页面展开为标题，然后恢复到侧栏状态

函数切换边栏（）{
document.getElementById（“侧栏”）.classList.toggle（“活动”）；
document.getElementById（“包装器”）.classList.toggle（“活动”）；
}
var width=document.body.clientWidth；
函数headerResize（）{
宽度=document.body.clientWidth；
控制台。日志（“宽度：”+宽度）；
如果（宽度>783）{
document.getElementById（“汉堡槽的标题”）.innerHTML=document.getElementById（“java标题”）.innerHTML；
document.getElementById（“java页脚槽”）.innerHTML=document.getElementById（“java页脚”）.innerHTML；
}否则{
document.getElementById（“汉堡槽的标题”）.innerHTML=document.getElementById（“java汉堡”）.innerHTML；
document.getElementById（“java边栏插槽”）.innerHTML=document.getElementById（“java边栏”）.innerHTML；
document.getElementById（“JavaFooterSlot”）.innerHTML=document.getElementById（“filler”）.innerHTML；
}
}
headerResize（）；
window.addEventListener（“调整大小”），函数（事件）{
headerResize（）；
})

#包装器{
位置：绝对位置；
宽度：100%；
右：0；
过渡：所有300毫秒缓解；
}
#包装器.active{
位置：绝对位置；
宽度：100%；
右：260px；
过渡：所有300毫秒缓解；
}
#边栏{
位置：绝对位置；
右：0px；
宽度：260px；
高度：100vh；
文本对齐：居中；
过渡：所有300毫秒缓解；
不透明度：0；
}
#侧边栏{
右：0px；
过渡：所有300毫秒缓解；
不透明度：1；
}

因此问题在于，调整页面大小会自动关闭侧栏内容，但不会将我的页面包装器切换回其原始位置

我只想补充一句

function autoCollapse() {
    if (document.getElementById("wrapper").classList.contains("active")) {
        document.getElementById("wrapper").classList.toggle('active');
    }
}

---

然后将其放在我的事件侦听器中

请仔细阅读以下信息：-