JQuery если заявление на основе размера экрана - PullRequest
11 голосов
/ 13 сентября 2011

У меня есть выдвижная панель навигации, которую я хотел бы открыть по умолчанию на ширине экрана> = 1024 и закрыть по умолчанию <1024. У меня есть кнопка, которая переключает его, открывая и закрывая его. Я только начинаю изучать JS. Я предполагаю, что есть способ установить состояние переключения по умолчанию в операторе if, если ширина окна> = 1024. Любая помощь будет принята с благодарностью. Вот что у меня есть до сих пор для переключения.

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

  });

Ответы [ 3 ]

27 голосов
/ 13 сентября 2011
$(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();
    }
});

Это переключит элемент, когда документ будет готов, еслиширина верна.

2 голосов
/ 13 сентября 2011

Только тест для screen.width > 1024.

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

1 голос
/ 11 февраля 2018

Я делал подобный проект, и этот код работал для меня ..

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