web-dev-qa-db-ja.com

画面サイズに基づくjqueryifステートメント

画面幅> = 1024でデフォルトで開き、デフォルト<1024で閉じるスライドアウトナビゲーションバーがあります。開閉を切り替えるボタンがあります。私はちょうどjsを学び始めています。ウィンドウ幅が1024以上の場合、ifステートメントでデフォルトのトグル状態を設定する方法があると思います。どんな助けでも大歓迎です。これが私がこれまでにトグルについて持っているものです。

$('a.expand').toggle(function() {
        $(this).addClass("open");
        $('#nav').animate({width: 50},{queue:false, duration:300});
        $('.wrapify').animate({marginLeft: 50},{queue:false, duration:300});
        $('.primarynav ul').hide();
        $('.navlogo').hide();   

  }, function() {
        $(this).removeClass("open");
        $('#nav').animate({width: 200},{queue:false, duration:300});
        $('.wrapify').animate({marginLeft: 200},{queue:false, duration:300});
        $('.primarynav ul').show();
        $('.navlogo').show(); 

  });
jquerytogglescreen-size
12
Drhodes
$(document).ready(function() {
    // This will fire when document is ready:
    $(window).resize(function() {
        // This will fire each time the window is resized:
        if($(window).width() >= 1024) {
            // if larger or equal
            $('.element').show();
        } else {
            // if smaller
            $('.element').hide();
        }
    }).resize(); // This will simulate a resize to trigger the initial run.
});

編集：

または多分これはあなたが求めているものです：

$(document).ready(function() {
    if($(window).width() >= 1024) {
        $('a.expand').click();
    }
});

これにより、幅が正しい場合、ドキュメントの準備ができたときに要素が切り替わります。

27
demux

screen.width > 1024をテストするだけです。

https://developer.mozilla.org/en/DOM/window.screen.width

2
Blazemonger

私は同様のプロジェクトを行っていましたが、このコードはうまくいきました。

if($(window).width() >= 540) {
   //code to execute
}
1
ArafPlays