Mobile Menu JQuery Menu Toggle Doesn't Close

Question

I am coding a mobile menu to display when a menu toggle is clicked. This solution is currently working on smaller desktop windows (Chrome and Safari), but does not work on iOS (Safari). I tested the javascript event on mobile by using alert('You have clicked the menu toggle') in the $('.menu-toggle') function and it works, which leads me to believe this is a CSS issue.

See my code below:

HTML:

 <div class="mobile-nav-container"> <div id="mobile-logo-home"> <a href="index.html"><img src="images/Chuck_Logo_V1.png" alt="Chuck Guth Site Logo" width="132px" height="35px"></a> </div> <nav class="mobile-nav"> <ul> <li class="mobile-menu-item"><a href="index.html">Home</a></li> <li class="mobile-menu-item"><a href="about.html">About</a></li> <li class="mobile-menu-item"><a href="buyer-information.html">Buyer Information</a></li> <li class="mobile-menu-item"><a href="search-homes.html">Search Homes</a></li> <li class="mobile-menu-item"><a href="featured-listings.html">Featured Listings</a></li> <li class="mobile-menu-item"><a href="mortgage-calculator.php">Mortgage Calculator</a></li> <li class="mobile-menu-item"><a href="seller-information.html">Seller Information</a></li> <li class="mobile-menu-item"><a href="home-valuation.html">Home Valuation</a></li> <li class="mobile-menu-item"><a href="west-pasco.html">West Pasco</a></li> <li class="mobile-menu-item"><a href="north-pinellas.html">North Pinellas</a></li> <li class="mobile-menu-item"><a href="gulf-beaches.html">Gulf Beaches</a></li> <li class="mobile-menu-item"><a href="contact.html">Contact</a></li> </ul> </nav> </div> <div class="menu-toggle"> <div class="hamburger"></div> </div> 

CSS:

 /* Hide regular menu by default */ .site-nav, .reg-logo { display: none; } header::after { content: ''; clear: both; display: block; } .mobile-logo { position: relative; float: left; margin: 0; top: -.25em; left: 1em; cursor: pointer; } .mobile-nav { position: absolute; width: 100%; top: -.5em; background: #f1f1f1; clip-path: circle(0px at top right); -webkit-clip-path: circle(0px at top right); transition: clip-path ease-in-out 750ms; -webkit-transition: clip-path ease-in-out 750ms; } .mobile-nav--open { clip-path: circle(250% at top right); -webkit-clip-path: circle(250% at top right); display: block; } .mobile-nav ul { display: none; margin: 0; padding: 0; list-style: none; } .mobile-nav ul li a { border-bottom: 1px solid #333333; } /* .mobile-nav li:last-child { border-bottom: none; } */ .mobile-nav a { color: #333333; padding: 1em 1em 1em 1em; text-decoration: none; font-size: .875em; } .mobile-nav a:hover, .mobile-nav a:focus { background: #f1f1f1; color: #a5c5c3; } .menu-toggle { position: absolute; padding: 1.25em; top: 0em; right: .5em; cursor: pointer; font-size: .75em; } .hamburger, .hamburger::before, .hamburger::after { content: ''; display: block; background: #333333; height: 3px; width: 1.75em; border-radius: 3px; transition: all ease-in-out 500ms; -webkit-transition: all ease-in-out 500ms; } .hamburger::before { transform: translateY(-6px); -webkit-transform: translateY(-6px); } .hamburger::after { transform: translateY(3px); -webkit-transform: translateY(3px); } .open .hamburger { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .open .hamburger::before { opacity: 0; } .open .hamburger::after { transform: translateY(-3px) rotate(-90deg); -webkit-transform: translateY(-3px) rotate(-90deg); } 

JavaScript:

 <!-- Begin mobile nav JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> $('.menu-toggle').click(function() { $('.mobile-nav').toggleClass('mobile-nav--open', 500); $(this).toggleClass('open'); }); $('.mobile-menu-item').click(function() { $('.mobile-nav').removeClass('mobile-nav--open', 500); }) </script> <!-- End mobile nav JS --> 

Thanks for any and all help!

Answer 1

回答我自己的问题-清除浏览器的缓存后，它似乎运行正常。