移动菜单 JQuery 菜单切换不关闭

Question

我正在编码单击菜单切换时显示的移动菜单。该解决方案目前正在使用较小的桌面窗口（Chrome和Safari），但在iOS（Safari）上不起作用。我在$（'。菜单toggle'）函数中使用Alert（"您已经单击菜单切换"）在Mobile上测试了JavaScript事件，并且可以正常工作，这使我相信这是CSS问题。

请参阅下面的代码：

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 -->

感谢您的任何帮助！

Answer 1

回答我自己的问题 - 清除了浏览器的缓存后，它的工作正常。