Question

当我在文件中使用以下代码时。

var width=jQuery(window).width();
    if(width<980){
        jQuery('.std .home-right').hide();
    }else{
     jQuery('.std .home-right').show();
     }

当我调整窗口宽度小于980px时，.std .home-right无法隐藏，当我调整窗口宽度小于980px到大于980时，.std .home-right无法显示。为什么呢？

Answer 1

对于您的情况，使用样式表中的宽度检测可能更简单，而不是jquery：

在你的css中添加以下内容：

@media all and (min-width: 980px) {  .std .home-right { display:none; } }

@media all and (max-width: 979px) {   .std .home-right { display:block; } }

希望得到这个帮助。

Answer 2

您需要监控调整大小事件。

$(window).resize(function () {
  var width = $(window).width();
  console.log(width);
  if (width < 500) {
    $('.std .home-right').hide();
  } else {
    $('.std .home-right').show();
  }
});

http://jsfiddle.net/C2Kx9/

Answer 3

添加$(window)以调整事件大小，如下所示：

function setWidth(){
    var width = $(window).width();
    if(width < 980){
        jQuery('.std .home-right').hide();
        console.log(1);
    } else {
        jQuery('.std .home-right').show();
        console.log(2);
    }
}
$(document).ready(function(){
    setWidth();
});
$(window).resize(function(){
    setWidth();
});

Answer 4

您所做的是（希望文档就绪）只需设置浏览器的宽度即可。如果你想在调整大小的同时工作，你需要做这样的事情;

$( window ).resize( function () {

    var width = $( window ).width();

    if ( width < 980 ) {
        $( '.std .home-right' ).hide();
    } else {
        $( '.std .home-right' ).show();
    }

});

这将导致浏览隐藏并显示所需的元素。但是在你继续并转发代码之前，我可以建议先看看这个页面

http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/

resize事件会产生很多事件，这通常被认为是一件坏事。

Answer 5

您应该在窗口调整大小函数中编写此代码，如下所示

$(window).resize(function () {
var width=jQuery(window).width();
    if(width<980){
        jQuery('.std .home-right').hide();
    }else{
     jQuery('.std .home-right').show();
     }
});

这可能对你有用

根据屏幕宽度隐藏正确的内容

5 个答案: