Javascript 菜单切换在上线后无法在移动设备上运行

Question

I have a page that toggles a menu when clicked on the menu anchor. It is working well from mobile devices when hosted locally on xamp server, but just displays # when it is on the production server. Still, it works when I resized desktop window size, but not on my mobile. Here is my link to toggle a menu

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

And here is my js code

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

My CSS code is

.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 have included both my local js file and jquery file from CDN

Answer 1

@GemeAlex

Can you please check the browser version in prod env and your local env. because toggle is very simple thing and as you said if it is working in your local, then i doubt it can be a version mismatch or the browser in prod env is not supporting the toggle.

Answer 2

You gave max-width: as 991px. So when you resize the browser more than 991px, the "#responsive-nav {" will not work. change the max-width to 1440px. It will work in desktop view as well