Question

我有这段代码：

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
//<![CDATA[ 
$(window).load(function(){
$('#content-left').css('width', '100%').css('width', '-=320px');
$(window).on('resize', function(){
$('#content-left').css('width', '100%').css('width', '-=320px');
});
});
//]]>  
</script>

上面的代码效果很好，但我需要的是这个代码停止工作或切换回100％宽度（不减去320px），当屏幕大小为768px或更少时。

我做了一些谷歌搜索，发现了这个：

if ($(window).width() <= 768){  
        // do something here
    }

但我不确定如何将其添加到现有代码中。

背景：

我的侧边栏是页面右侧300px处的固定侧边栏。我在侧边栏（＃content-right）和主要部分（#content-left）之间有20px的填充。我的主要部分（#content-left）使用上面的100％ - 320px脚本。

我正在使用两个CSS。一个是常规CSS。其他用途：

@media all and (max-width: 768px) {}

谢谢。：）

Answer 1

你可以像这样组合它们。这仅在窗口不小于769像素时运行代码。这就是“！”符号，将其转换为NOT。

$(window).load(function() {
  if (!$(window).width() <= 768) {
    $('#content-left').css('width', '100%').css('width', '-=320px');
    $(window).on('resize', function() {
      $('#content-left').css('width', '100%').css('width', '-=320px');
    });
  }
});

Answer 2

使用简单的if/else语句，将调整大小的代码放在函数中，并在页面加载和调整窗口大小时调用该函数。

function resize() {
  if ($(window).width() <= 768) {
    $('#content-left').css('width', '100%');
  } else {
    $('#content-left').css('width', '100%').css('width', '-=320px');

  }
}

$(window).load(function() {
  resize();
});
$(window).on('resize', function() {
  resize();
});

针对不同的屏幕尺寸停止jquery。

2 个答案: