jquery - 如果视口低于设置的宽度，则隐藏 DIV

Question

我一直在努力/寻找这个特定的想法，但我似乎找不到解决方案。

基本上我正在使用一个wordpress插件，其中显示了一段内容，除了移动设备外它工作正常。

我试图通过在视口达到一定宽度时隐藏 DIV 来解决此问题。

这是我到目前为止所拥有的：

<script>
jQuery(document).ready(function () {
var screen = $(window)    
if (screen.width() < 800) {
    $("#attentionGrabber").hide();
}
else {
    $("#attentionGrabber").show();
}
});</script>

这是假设 #attentionGrabber 是我要控制的 div。

我认为这是根据视口显示或隐藏它的最简单方法，但是当我将该代码放在标题中时似乎没有任何反应。

Answer 1

您必须绑定到某个事件，以便您的函数在调整屏幕大小时运行。

<script>
jQuery(document).resize(function () {
    var screen = $(window)    
    if (screen.width() < 800) {
        $("#attentionGrabber").hide();
    }
    else {
        $("#attentionGrabber").show();
    }
});
</script>

不过，真的，我会走这条路：

@media screen and (max-width: 799px) {
    #attentionGrabber {display: none}
}

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Answer 2

你有没有为你的脚本导入 jquery m

 <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"  >

然后

      <script type="text/javascript"  >
$(document).ready(function() {

function _resizeTDiv()
{
  ..your code here
}
 _resizeTDiv();

$(window).resize(function() {
 _resizeTDiv();
});

});

</script>