Javascript переключатель меню не работает на мобильных устройствах после запуска - PullRequest
0 голосов
/ 16 июня 2020

У меня есть страница, которая переключает меню при нажатии на якорь меню. Он хорошо работает с мобильных устройств, когда размещен локально на сервере xamp, но просто отображает #, когда он находится на рабочем сервере. Тем не менее, это работает, когда я изменяю размер окна рабочего стола, но не на моем мобильном телефоне. Вот моя ссылка для переключения меню

<div class="menu-toggle">
    <a href="#">
        <i class="fa fa-bars"></i>
        <span>Menu</span>
        </a>
</div>

А вот мой js код

$('.menu-toggle > a').on('click', function (e) {
        e.preventDefault();
        $('#responsive-nav').toggleClass('active');
    })

Мой CSS код

.header-ctn .menu-toggle {
  display: none;
}
@media only screen and (max-width: 991px) {
  .header-ctn .menu-toggle {
    display: inline-block;
  }
  #responsive-nav {
    position: fixed;
    left: 0;
    top: 0;
    background: #15161D;
    height: 100vh;
    max-width: 250px;
    width: 0%;
    overflow: hidden;
    z-index: 22;
    padding-top: 60px;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
  }
  #responsive-nav.active {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    width: 100%;
  }

I включены как мой локальный файл js, так и файл jquery из CDN

Ответы [ 2 ]

0 голосов
/ 16 июня 2020

@ GemeAlex

Не могли бы вы проверить версию браузера в prod env и вашем локальном env. потому что переключение - это очень простая вещь, и, как вы сказали, если он работает на вашем локальном компьютере, я сомневаюсь, что это может быть несоответствие версии или браузер в prod env не поддерживает переключатель.

0 голосов
/ 16 июня 2020

Вы указали max-width: как 991px. Поэтому, когда вы изменяете размер браузера более чем на 991 пиксель, "# responsive-nav {" не будет работать. измените максимальную ширину на 1440 пикселей. Он также будет работать в представлении на рабочем столе

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...