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

 <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>

如果视口低于设定宽度，则隐藏DIV

2 个答案: