jquery - jQuery窗口调整大小麻烦

Question

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

$('.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')));
        }
    }); 
});

代码笔： 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;
        }
    });

});

演示：这里

Answer 2

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

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

编辑 - 如果你想动态改变窗口大小，你可以这样做：

$(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','');
    }
  });
});

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

Answer 3

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

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

.content{
    min-width: 768px;
}