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