0

次のコードは、768pxを超える画面サイズで（ロード時およびウィンドウサイズ変更時に）1回だけトリガーする必要があります。

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

解決策を持っている人はいますか？

4

3 に答える 3

0

問題はjavascriptではなく、（。content）divのcssプロパティにあります。それもその親も幅の値を持っていないため、画面の幅に関係なく、サイズ変更時に拡張されます。画面幅が768未満の場合、サイズ変更はトリガーされません。

ただし、cssを使用して最小幅を設定できます。

.content{
    min-width: 768px;
}
于 2013-03-06T04:30:11.360 に答える
0

コードを一度だけトリガーする必要がある場合は、次のようにしてください。

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

ウィンドウのサイズ変更イベントの外に変数を置くことが重要です。スタイルを元の状態に戻すために、div のスタイル属性を消去する else ステートメントを使用します。

于 2013-03-06T03:26:16.157 に答える
0

あなたが探しているのはこれです

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

});

デモ:こちら

于 2013-03-06T03:24:13.927 に答える