Функция изменения ориентации jQuery не работает - PullRequest
Новая
       33

Функция изменения ориентации jQuery не работает

0 голосов
/ 23 января 2019

Ниже ширины 800px мой #main_navigation скрыт CSS display: none в медиа-запросе. Щелчок по значку меню (который становится видимым ниже 800 пикселей) запускает этот сценарий jQuery: jQuery('#main_navigation').slideToggle(300); Он вставляет style:'display: block' в этот тег, и при повторном нажатии он меняется на style:'display: none'.

Теперь, когда я, например, использую планшет / iPad 1024x768, в альбомном режиме меню регулярно отображается (в виде горизонтального списка), в портретном режиме оно скрыто (представлено значком меню) и отображается при нажатии на меню. значок.

Но когда я дважды щелкаю / нажимаю на значок (показываю, затем скрываю) в портретном режиме, а затем переключаю планшет в альбомный режим, ни значок (из-за таблицы стилей) , ни обычное меню ( из-за атрибута style:'display: none', установленного jQuery), отображаются: меню вообще нет!

Поэтому я вставил эту функцию, надеясь просто удалить / удалить атрибут style при повороте устройства и тем самым сделать меню видимым снова с шириной более 800 пикселей (т.е. применяются обычные таблицы стилей и медиазапросы): 

jQuery(window).on('orientationchange', function () {
    jQuery('#main_navigation').removeAttr('style');
});

Но: это не работает, мой тег меню по-прежнему содержит style:'display: none', и поэтому в описанной ситуации нет видимого меню. Где ошибка?

1 Ответ

0 голосов
/ 23 января 2019

Попробуйте использовать условие о текущей ширине при изменении размера дисплея:

А если orientationchange не работает (должно работать), попробуйте добавить событие resize. 

jQuery(window).on('orientationchange resize', function () {
  if(jquery("body").width()>768){  // Make sure to test that width... Just a suggestion here.
    jQuery('#main_navigation').show();
  }
});
...