jQuery的，如果根據屏幕大小

我了導航欄幻燈片，我想在默認情況下> = 1024的屏幕寬度開放，在默認情況下< 1024收我有一個按鈕，切換它打開和關閉它的語句。我剛剛開始學習js。我想如果窗口寬度> = 1024，有一種方法可以在if語句中設置默認切換狀態。任何幫助將不勝感激。這是我迄今爲止的切換。jQuery的，如果根據屏幕大小

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

    });

來源

2011-09-13 Drhodes

這聽起來像[CSS3媒體查詢（工作http://www.css3.info/preview/media --queries /）而不是jQuery。 – bzlm

我最初使用CSS3媒體查詢，但仍需要切換爲打開和關閉動畫。我似乎無法弄清楚如何將默認的切換狀態設置爲關閉，我希望用jQuery來做。我遇到的問題是，當面板中的媒體查詢在技術上仍然處於打開狀態時，所以當我點擊它時，它只是試圖再次關閉，然後正常工作。 – 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(); 
    } 
});

這將切換元素時準備好文檔後，如果寬度正確。

來源

2011-09-13 17:22:07 demux

Amar，你可以多解釋一下，或者使用我提供的代碼向我展示一個示例？我感謝您的幫助。 – Drhodes

添加了一些註釋和示例來顯示和隱藏類名稱爲「element」的元素。在你當前的代碼中，它實際上看起來像你想要點擊某些東西時顯示。它是如此還是你希望它改變實際的窗口大小。根據窗口的大小，您是否可能希望元素在單擊時採取不同的行爲？ – demux

只是測試screen.width > 1024。

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

來源

2011-09-13 16:43:04 Blazemonger

我已經用它來測試屏幕寬度，但似乎無法弄清楚從哪裏去從這裏得到切換默認狀態根據所述寬度改變。 $（文件）。就緒（函數（）{ \t如果（（screen.width> = 1024）） \t { \t \t \t } \t別的 \t { \t \t \t } } ）; – Drhodes

當用戶調整窗口大小時，是否要更改它？如果是這樣，使用這個：'$（window）.resize（function（）{if（screen.width> = 1024）...}）;' – Blazemonger

我想我需要它改變當屏幕大小爲1024，或如果它們的大小調整到1024以下，我的主要問題是在<1024時關閉切換的默認狀態，當> 1024時打開。我可以用css3媒體查詢來完成剩下的工作，但是期待jquery做動畫和切換。 – Drhodes

我在做一個類似的項目，該代碼摸索出適合我..

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

來源

2018-02-11 17:36:35 ArafPlays

jQuery的，如果根據屏幕大小

回答

相關問題