Question

以下代码只应在768px以上的屏幕尺寸上触发一次（在加载和窗口调整大小时）：

$('.content').css('margin', parseInt($('.banner').css('height')) + parseInt($('.content').css('margin')));

我不希望它在768px以下的尺寸上触发。这不起作用，因为它在调整大小时不止一次触发，并且不会在768px以下删除它：

$(function() {
    $(window).resize(function() {
        if($(this).width() >= 768) {
            $('.content').css('margin', parseInt($('.banner').css('height')) + parseInt($('.content').css('margin')));
        }
    }); 
});

Codepen：http://codepen.io/anon/pen/zgxir

有人有解决方案吗？

Answer 1

您可能正在寻找的是

$(function() {
    var flag = false;
    $(window).resize(function() {
        console.log($(window).width())
        var width = $(window).width();
        if (!flag && width >= 768) {
            flag = true;
            console.log('set')
            $('.content').css('margin', parseInt($('.banner').css('height')) + parseInt($('.content').css('margin')));
        } else if (width < 768) {
            flag = false;
        }
    });

});

演示：Here

Answer 2

如果只需要触发代码，为什么不只是：

$(function() {    
  if ( $(window).width() >= 768 ) {
    //yourcode here
    $('.content').css('margin', parseInt($('.banner').css('height')) + parseInt($('.content').css('margin')));
  }
});

编辑 - 如果要动态更改Windows调整大小，您可以执行以下操作：

$(function() {
  var 
  bh = $('.banner').css('height'),        
  bm = $('.content').css('margin');
  $(window).resize(function() {
    if($(window).width() >= 768) 
    {
      $('.content').css('margin', bh+bm);
    }
    else 
    {
      $('.content').attr('style','');
    }
  });
});

将变量放在windows resize事件之外是很重要的，否则当窗口改变大小时它们将永远递增。我使用else语句清除div的style属性，以便将样式返回到原始状态。

Answer 3

问题不在于javascript它与（.content）div的css属性有关。因为它或它的父母都没有宽度值，无论屏幕的宽度如何，它都会在调整大小时展开。当屏幕宽度<1时，调整大小不会触发。 768。

但是你可以用css设置最小宽度：

.content{
    min-width: 768px;
}

jQuery窗口调整大小麻烦

3 个答案: