Question

我正在使用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>

Answer 1

为什么不使用媒体查询？

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

http://jsfiddle.net/x9y1s14o/

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

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

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

2 个答案: