Страницы

Поиск по вопросам

воскресенье, 7 апреля 2019 г.

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

Адаптирую сайт магазина для мобильных устройств. При просмотре с десктопа подпункты выпадают (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'); } });


Ответ

Если необходимо, что бы условие срабатывало не только при инициализации скрипта, а и при изменении размера экрана, то нужно использовать обработчик. И проверять, как написал @installero, значение ширины экрана $(window).width()
$(window).on('resize', function () { if ($(window).width() > 1280) { // код } else { // код } })

Комментариев нет:

Отправить комментарий