javascript - 移动菜单 JQuery 菜单切换不关闭
问题描述
我正在编写一个移动菜单以在单击菜单切换时显示。此解决方案目前适用于较小的桌面窗口(Chrome 和 Safari),但不适用于 iOS (Safari)。我通过在 $('.menu-toggle') 函数中使用 alert('You have clicked the menu toggle') 在移动设备上测试了 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 -->
感谢您的任何帮助!
解决方案
回答我自己的问题 - 清除浏览器的缓存后,它似乎工作正常。
推荐阅读
- javascript - Azure Text to Speech Throttled due to too many requests websocket error code: 1007 with only 3 concurrent requests
- google-cloud-platform - GCP - 我们可以强制用户在创建资源时添加标签吗?
- active-directory - 根据授权码获取自定义策略名称
- swift - 如何让 UIView 背景变成磨砂黑色?迅速?
- nuxt.js - PurgeCSS 忽略 whitelistPatterns 中的正则表达式并删除 TailwindCSS 类(在 NuxtJS 上)
- python - 如何使函数等于变量?
- sbt - 我收到这个 sbt 错误,有什么办法可以解决这个问题
- list - Dart:我如何计算一个特定整数列表的平均值,其中 X 个其他整数列表只有一个函数
- c# - 图像不会改变 - WPF
- sql - 将 excel 中的值连接到插入查询值中