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

Question

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

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

侧边栏

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

function toggleSidebar() {
  document.getElementById("sidebar").classList.toggle('active');
  document.getElementById("wrapper").classList.toggle('active');
}
var width = document.body.clientWidth;
function headerResize() {
  width = document.body.clientWidth;
  console.log("Width: " + width);
  if (width > 783) {
    document.getElementById("Header-to-Hamburger-slot").innerHTML = document.getElementById("java-header").innerHTML;
    document.getElementById("java-footer-slot").innerHTML = document.getElementById("java-footer").innerHTML;
  } else {
    document.getElementById("Header-to-Hamburger-slot").innerHTML = document.getElementById("java-hamburger").innerHTML;
    document.getElementById("java-sidebar-slot").innerHTML = document.getElementById("java-sidebar").innerHTML;
    document.getElementById("java-footer-slot").innerHTML = document.getElementById("filler").innerHTML;
  }
}
headerResize();
window.addEventListener("resize", function(event) {
  headerResize();
})

#wrapper {
  position: absolute;
  width: 100%;
  right: 0;
  transition: all 300ms ease;
}
#wrapper.active {
  position: absolute;
  width: 100%;
  right: 260px;
  transition: all 300ms ease;
}
#sidebar {
  position: absolute;
  right: 0px;
  width: 260px;
  height: 100vh;
  text-align: center;
  transition: all 300ms ease;
  opacity: 0;
}
#sidebar.active {
  right: 0px;
  transition: all 300ms ease;
  opacity: 1;
}

Answer 1

所以问题是调整页面大小会自动关闭侧边栏内容，但它不会将我的页面包装器切换回其原始位置。

我只需要添加

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

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