Подключить jQuery-скрипт при условии

#javascript #jquery #frontend

Адаптирую сайт магазина для мобильных устройств. При просмотре с десктопа подпункты
выпадают (hover, absolute), а для мобильных клиентов решил сделать разъезжающиеся пункты
и подпункты (пример на JsFiddle).

Вопрос следующий: как подключать jQuery-скрипт только при определенном разрешении?
Как поставить условие бы при большом размере области просмотра срабатывал обычный css,
а на мобильных появлялась jQuery-анимация?

Вот скрипт (больше по ссылке):

var $menu_with_children = $('.has_children > a');

$menu_with_children.on('click', function(e){
    e.preventDefault();
    var $this = $(this);
    if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
        $this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
    } else{
        $this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
    }
});

    

Ответы

Ответ 1

Если необходимо, что бы условие срабатывало не только при инициализации скрипта,
а и при изменении размера экрана, то нужно использовать обработчик. И проверять, как
написал @installero, значение ширины экрана $(window).width():

$(window).on('resize', function () {
    if ($(window).width() > 1280) {
        // код
    } else {
        // код
    }
})


Ответ 2

Есть как минимум две ширины «сайта» — ширина окна браузера и ширина документа (разница
есть, например, если у пользователя появился скроллинг).

В jQuery $(window).width() и $(window).height() возвращают соответственно ширину
и высоту области просмотра браузера.

Пользоваться ими можно, например, так

if ($(window).width() > 1280) {
  // Тут код для больших разрешений,
  // к примеру, с шириной окна с сайтом больше 1280 писелей
} else {
  // Тут код для маленьких экранов
}


Ответ 3

if(($(window).width() > 1024)&&($(window).height() > 768)){
//что-то там...
} else {
//чего-то там...
}