Как не перекрывать джаваскриптом медиа-запросы?

Question

[rtfm mftr]

Допустим, на странице есть меню
С помощью медиа-запроса при ширине окна < 640 оно прячется (через display: none), при этом появляется кнопка-бургер, по нажатию на которую оно появляется обратно путем $('#menu').css('display', 'block'). Если после этого растянуть окно шире 640пх и сжать обратно меню уже не пропадает, так как скрипт добавил правило инлайново. Не самый частый юзкейс, но тем не менее. Как это побороть?

Answer 1

[Михаил Шведков]

Попробуйте вместо
$('#menu').css('display', 'block')
Сделать что-то вроде
$('#menu').toggleClass('classname')
где

@media screen and (max-width: 640px){
.classname{
display:block
}
}

Answer 2

[Roman]

Добавляйте/убирайте при клике класс для меню, а не инлайновое правило.

Comments

[rtfm mftr]

Тогда получается наоборот, правило в медиа-запросе его перекрывает

[Roman]

Ну так в CSS вы сами управляете переопределением стилей. Сделайте чтобы не перекрывало.

[Дмитрий Беляев]

rtfm mftr: насчет перекрытия правил, почитайте любую ссылку отсюда: запрос в гугле

Answer 3

[bro-dev]

Самое простое при ресайзе окна сворачивать меню вашими средствами.

Answer 4

[Сергей Горячев]

$( window ).resize(function() {
  $( ".menu" ).hide();
});

Answer 5

[Dark Hole]

Нет возможности повесить обработчик на onresize, что ли?

Comments

[rtfm mftr]

А это самое простое решение?

[Dark Hole]

rtfm mftr: представьте себе, да. При ресайзе(и загрузке!!!) проверяем вышину и убираем(если надо) то-что-вам-надо