Question

我正在编码一个移动菜单，以便在单击菜单切换时显示。该解决方案当前在较小的桌面窗口（Chrome和Safari）上运行，但在iOS（Safari）上不运行。我通过在$（'。menu-toggle'）函数中使用alert（'您已单击菜单切换'）来测试了移动设备上的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

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

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

1 个答案: