javascript - 调整浏览器大小时如何隐藏div？

Question

查看www.usatoday.com。
调整浏览器大小时，右侧部分会隐藏。然后，当单击按钮（反过来，当现在隐藏时出现）时，它会从无处出现。我想做同样的事情。

Answer 1

在 CSS 中使用媒体查询

@media only screen and (max-device-width: 480px) {
    .mydiv{display:none;}
}

相应地改变你的宽度。

Answer 2

这将使用媒体查询来实现，请查看http://mediaqueri.es/ 以获取更多示例

这里有一些关于媒体查询的教程

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://www.1stwebdesigner.com/css/media-queries-tutorial-convert-burnstudio-responsive-website/

Answer 3

我建议你很简单的决定。这是你的html：

<div id="divToHide">
    TEXT THAT SHOUD DISAPPEAR
</div>
<button id="showDivToHide">
    Show div</button>

那是javascript代码：

$(document).ready(function () {
    $(window).resize(function () {
        $('#divToHide').hide();
    });

    $('#showDivToHide').click(function () {
        $('#divToHide').show();
    });
});

当然你可以描述你自己的规则来隐藏和显示你的 div。