Как сделать открывающиеся меню только на телефоне?

Question

[jazzman7]

Здравствуйте. Суть такая, есть контент, на экранах мобильных контент скрывается, по нажатию на заголовок над контентом див открывается и закрывается. Проблема в том, что в полной версии скрывать по клику ничего не надо. Попробовал два варианта сделать на jquery, если ширина меньше 600, то код открывающий/закрывающий дивы включается, если нет, то нет. Код работал, но плохо, добавил ещё отслеживание ресайза окна, но все равно остались проблемы, во-первых если окно уменьшить, а потом увеличить, почему-то код на закрытие снова работал, а во-вторых открытие блока залипало почему-то в браузере. В общем на jquery я уже попробовал наверное, все, что возможно, может есть ответ в css? Или может кто-то делал подобное на jquery и все получилось?

Comments

[jazzman7]

TheAndrey7, это понятно, но как медиа запросы запретят выполнять отслеживание клика по элементу с помощью jquery?

[Кирилл Никитин]

jazzman7, нельзя кликнуть по элементу, который скрыт.

[jazzman7]

Кирилл Никитин, ну кстати да, можно ведь два внешне похожих заголовка показывать, один кликабельный до 600 px и другой от 600px не кликабельный, спасибо за идею) однако топорное какое-то решение

[Ankhena]

jazzman7,

однако топорное какое-то решение

Несомненно.

Вероятно, вы не учли все условия.
Например, при увеличении окна, клик сняли, а класс с блока нет.
Но без примера в песочнице сложно сказать, что там не так.

[FrelFrloich]

if (window.innerWidth < 550) {
                 
}

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

Answer 1

[qwertyshka]

В css есть
@media
Эта фишка позволяет по всякому менять стили в зависимости от ширины экрана.