如果调整视口大小，如何显示以前隐藏的 div？答案

【问题标题】：How do I show a previously hidden div if the view port is resized?如果调整视口大小，如何显示以前隐藏的 div？
【发布时间】：2014-12-11 16:47:54
【问题描述】：

我正在使用 Bootstrap 3 开发一个响应式站点。我有一个 JS 显示/隐藏脚本，当屏幕为 max-width 767px 时可用，但如果我已经显示然后隐藏了该大小的 div，当我调整大小时屏幕回到桌面 div 仍然隐藏。

如果屏幕超出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>

【问题讨论】：

请提供代码示例
我只是使用一个基本的 getElementbyID 并将显示更改为 none 或 block 并且目标正在使用类 visible-xs 以便它仅在 max-width767px 可见我需要一些东西来重置 div以屏幕尺寸为事件的样式？
为什么不能同时使用 CSS 媒体查询？
这可能吗？我在 xs（移动大小）中使用媒体查询隐藏 div，但随后我使用 show and hide 将 div 覆盖在主要内容区域上。我遇到的问题是当我在单击时将其隐藏，然后将屏幕侧更改为桌面时，div 仍然隐藏。我希望能够在屏幕不够大以包含它时显示和隐藏，然后在屏幕大小更改时重置脚本。
您需要发布您的代码。如果您的“我只是在使用基本的 getElementbyID ...”，那么请发布您“只是在使用”的内容！

标签： javascript twitter-bootstrap responsive-design show-hide

【解决方案1】：

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

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

http://jsfiddle.net/x9y1s14o/

【讨论】：

嗨，让我重新开始 - 我有一个 left-col div，它在桌面视图中是左列，但在移动视图中，我使用媒体查询将其隐藏。但是我想在单击移动设备中的按钮时显示 left-col - 这样它就像菜单中的幻灯片一样，宽度为屏幕的 75%，这很好我有这个工作。但是，如果我将浏览器最小化为移动大小，然后单击“显示”左列（这有效），然后单击关闭左列（隐藏它），当我将浏览器大小更改回桌面时，左列仍然隐藏，我不这样做'不想要。即使它已被隐藏，我也希望它能够将其带回。谢谢

【解决方案2】：

一般来说，有两种方法可以做到这一点：

使用 CSS 强制 div 以一种尺寸显示，并以另一种尺寸隐藏
使用 JavaScript 监听浏览器的变化，然后调用函数修改 dom 的状态

使用 CSS，您可以告诉浏览器当窗口大于断点时该做什么，以及当您的窗口小于您的断点时该做什么，767 px。

@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();
    }
};

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

【讨论】：