Javascript 如果视图端口已调整大小，如何显示以前隐藏的div？

我正在使用Bootstrap3开发一个快速响应的站点。我有一个JS show/hide脚本，当屏幕为

最大宽度767px

时可用，但如果我显示并隐藏了该大小的div，当我将屏幕调整回桌面时，div仍然隐藏

如果屏幕超出a

767px

，是否存在强制div返回的方法

<script type="text/javascript">
    function showFunction() {
        document.getElementById("left-col").style.visibility="visible";
    }

    function hideFunction() {
        document.getElementById("left-col").style.visibility="hidden";
    }
</script>

函数showFunction（）{
document.getElementById（“左栏”）.style.visibility=“可见”；
}
函数hideFunction（）{
document.getElementById（“左列”）.style.visibility=“hidden”；
}

那么为什么不使用媒体查询呢

@media (max-width: 767px) {
  .left-col {
    display: none;
  }
}

---

通常有两种方法：

使用CSS强制以一种大小显示div，以另一种大小隐藏div

使用JavaScript侦听浏览器中的更改，然后调用函数修改dom的状态

使用CSS，您可以告诉浏览器当窗口大于断点时该怎么办，当窗口小于断点时该怎么办，断点小于767px

@media (min-width: 767px) {
  .left-col {
    visibility: visible;
  }
}

@media (max-width: 767px) {
  .left-col {
    visibility: hidden;
  }
}

使用JavaScript，可以告诉浏览器在窗口调整大小时调用函数：

var breakpoint = 767;
window.onresize = function(event) {
    if (window.innerWidth >= breakpoint) {
       showFunction();
    } else { 
       hideFunction();
    }
};

---

注意：您的细节可能略有不同，但这是为了说明背后的想法。调整所需的细节。

请提供代码示例我只是使用一个基本的getElementbyID，并将显示更改为none或block，目标使用的是visible xs类，因此它仅在最大宽度767px时可见。我需要一些东西来重置divs样式，屏幕大小为事件？为什么不能同时使用这两个选项css媒体查询？这可能吗？当使用xs（手机大小）时，我使用媒体查询隐藏div，但随后我使用显示和隐藏将div覆盖在主内容区域上。我遇到的问题是，当我单击一次将其隐藏，然后将屏幕侧更改为桌面时，div仍然保持隐藏状态。我希望能够在屏幕不够大时显示和隐藏，但当屏幕大小改变时脚本会重置。您需要发布代码。如果您的“我只是在使用一个基本的getElementbyID…”，那么请发布您“只是在使用”的内容！您好，让我重新开始-我有一个左col div，它在桌面视图中是一个左col，但在移动视图中，我使用媒体查询隐藏它。但我想显示左栏时，点击移动按钮-这样它就像一个滑入菜单的宽度75%的屏幕这是好的，我有这个工作。但如果我将浏览器缩小到手机大小，然后单击“显示”左栏（此功能正常），然后单击关闭左栏（隐藏），当我将浏览器大小更改回桌面时，左栏将保持隐藏状态，这是我不希望看到的。我希望它能把它带回来，即使它被藏起来了。谢谢