0

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

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

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

4

5 回答 5

3

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

在您的 CSS 中添加以下内容：

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

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

希望这有帮助。

于 2013-01-21T04:14:05.273 回答
1

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

$(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/

于 2013-01-21T04:14:09.807 回答
0

添加$(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();
});
于 2013-01-21T04:14:12.427 回答
0

您所做的是（希望文档准备好）只需设置浏览器的宽度。如果你希望它在调整大小的同时工作，你需要做这样的事情；

$( 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 事件会产生很多事件，这通常被认为是一件坏事。

于 2013-01-21T04:14:52.273 回答
0

您应该像这样在窗口调整大小函数中编写此代码

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

这可能对你有用

于 2013-01-21T04:22:42.850 回答