0

我尝试使用以下代码使用 jQuery 隐藏 div：

$(window).resize(function(){
  if ( window.innerHeight < 750 ) {
    $("footer").animate({'height' : '0px'}, 500);
  }
  if ( window.innerHeight > 750 ) {
    $("footer").animate({'height' : '35px'}, 500);
  } 
});

我已经在 Chrome 中对其进行了测试，它只工作一次。它只会消失，并且不会通过调整大小再次出现。

我的代码有错误还是解决方案错误？

谢谢你的期待！

4

3 回答 3

1

简单的方法是使用媒体查询：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

例如，如果您的 id 为#divOne，您可以将 div 设置为正常样式，并添加一个单独的媒体查询，display: none;以了解窗口何时缩小到指定宽度。在这种情况下，当窗口的宽度低于 600px 时，div 会隐藏：

#divOne {display: block; height: 200px; background: #000; }

@media (max-width: 600px) {
  #divOne {
    display: none;
  }
}
于 2013-07-15T21:01:03.010 回答
0

这意味着这个条件if ( window.innerHeight > 750 ) {永远不会执行，因为浏览器window.innerHeight小于 750。要在控制台日志中查看值，如下所示：

console.log(window.innerHeight);
于 2013-07-15T21:07:03.130 回答
0

这是jQuery实现：

假设你想div1在窗口宽度小于时隐藏，750px如果窗口宽度大于则再次显示750px

HTML

<div id="div1">
</div>

CSS

#div1{
    width:100%;
    padding:30px;
    background:#1d1d1d;
}

jQuery

$(window).resize(setDivVisibility);
function setDivVisibility(){
     if (($(window).width()) < '750'){  
     $('#div1').css('display','none');  
     } else {  
     $('#div1').css('display','block');  
     } 
 }

工作jsfiddle：http: //jsfiddle.net/a8V9V/

于 2013-07-15T21:15:22.897 回答