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

Question

[mangust1785]

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

Есть блок с фильтрами. Реализован с помощью 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

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

Comments

[ThunderCat]

почему собсно не подходят медиа запросы?

Answer 1

[Aleksandr Kritskii]

window.onresize = function( event ) {};

// или

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

И соответственно делаешь проверку и добавляешь класс active, если ширина больше 992

Comments

[mangust1785]

А как это прописать для портретного и альбомного режима?

[Aleksandr Kritskii]

mangust1785, ну если разговор про портретный и альбомный режим, то можно сравнивать соотношение ширины к высоте и исходя из этого добавлять или убирать класс active

[mangust1785]

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

спасибо за это решение!

Answer 2

[Сергей delphinpro]

В современном мире использовать ресайз для этого нехорошо. Кроме того у вас получается привязка к магическим числам. А если размеры экрана другие?
Если нужно точно определять портрет/альбомный режимы, то стоит воспользоваться медиа-выражениями.

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);