@mangust1785

Планшеты — удалить класс active в портретном режиме и вернуть его обратно в альбомном?

Здравствуйте!

Есть блок с фильтрами. Реализован с помощью toggle на bootstrap4. Для toggle предусмотрена отдельная колонка на 1/3 экрана. Для ПК у toggle всегда по умолчанию стоит класс active (развернут), toggle-content - display:block

Для планшетов в портретном режиме колонка с toogle растянута на всю ширину экрана и с помощью этой конструкции я убираю класс active и сворачиваю toggle-content
if(window.width <= 992) {
     jQuery("div.toggle.active").removeClass("active");
     jQuery('div.toggle-content').css('display', 'none');
}


Но если повернуть планшет в альбомный режим, в котором колонка с toggle снова возвращается в исходный размер на 1/3 экрана, не возвращаются класс active для toggle и display: block для toggle-content

Подскажите каким образом можно вернуть эти классы при повороте экрана планшета?
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
kritskiy_a
@kritskiy_a
Frontend-developer
window.onresize = function( event ) {};

// или

window.addEventListener(`resize`, event => {
  // some code
}, false);


И соответственно делаешь проверку и добавляешь класс active, если ширина больше 992
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro
frontend developer
В современном мире использовать ресайз для этого нехорошо. Кроме того у вас получается привязка к магическим числам. А если размеры экрана другие?
Если нужно точно определять портрет/альбомный режимы, то стоит воспользоваться медиа-выражениями.

const mql = window.matchMedia('(orientation: portrait)');

function handleOrientationChange(evt) {
  if (evt.matches) {
    // Портрет
    jQuery('div.toggle').removeClass('active');
  } else {
    // Альбом
    jQuery('div.toggle').addClass('active');
  }
}

mql.addListener(handleOrientationChange);

handleOrientationChange(mql);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы