CSS/HTML 菜单 - 无法关闭 iOS 上的菜单

Question

我用CSS/HTML创建了一个菜单。 我无法关闭iPhone上的菜单。 例如，如果我打开它，让它关闭的唯一方法是重新加载页面或单击菜单项。

你能想到一种通过单击顶部菜单按钮关闭菜单的方法吗？

JSFIDDLE： https://jsfiddle.net/sf23103/0c03zL6h/

<div class="mobile_header">
<nav id="mobile-navigation" class="mobile-nav" role="navigation">
<ul class="menu">
<li class="menu-item"><a href="#"><span style="font-size:40px;">&#9776;</span> <span style="font-size:35px">MENU</span> </a>
<ul class="dropdown">
<li><a href="contact">Contact</a></li>
<li><a href="join">Join our Team</a></li>
<li><a href="faq">Questions?</a></li>
<li><a href="be-involved">Be Involved</a></li>
<li><a href="forms">Forms</a></li>
<li><a href="menu item">menu item</a></li>
<li><a class="active" href="index.php">Home</a></li>
</ul>
</li></ul>
</nav>
</div>

.CSS：

.mobile-nav {visibility:hidden; display:none;}
.mobile_header {visibility:hidden; display:none;}
.SRPD_MOBILE {visibility:hidden; display:none;}
@media (max-width: 991px) {
#front_page_image {visibility: hidden;display: none;}
.mobile-nav {visibility:visible;display:block;}
.mobile_header {

可见性：可见;显示：块;宽度：1024px;高度：400px;背景图片：网址('../images/misc/inspection_mobile.jpg'(; }

.SRPD_MOBILE {
visibility:visible;display:block;
color:#000;
font-family: 'Cinzel', serif;
font-size:35px;
text-align:center;
margin:20 0 0 0;
text-transform:uppercase;
letter-spacing:12px;
}
.mobile-nav {
display: block;
font-family: "Archivo Narrow", sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0px;
width:110%;
}
.mobile-nav ul {
background: #fff;
list-style: none;
margin: 0;
padding-left: 0;
width:100%;
color:#fff;
font-size:25px;
letter-spacing:10px;
text-transform:uppercase;
font-family: "Archivo Narrow", sans-serif;
font-weight:300;
}
.mobile-nav li {
color: #fff;
background: #3498DB;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 12px;
position: relative;
text-decoration: none;
text-transform: uppercase;
background-color: #003664;
border-top:solid 1px #fff;
}
.mobile-nav li a {  
display: block;
color:#fff;
text-align: center;
padding: 28px 16px;
text-decoration: none;
}

.mobile-nav li li a:hover {   color:#000;}
.mobile-nav li:hover {
@include transition(background, 0.2s);
background-color: #003664;
cursor: pointer;
}
.mobile-nav ul li ul {
background: #52a6df;
visibility: hidden;
float: left;
width:100%;
/* min-width: 150px; */
position: absolute;
transition: visibility 0.65s ease-in;
margin-top:12px;
left: 0;
z-index: 999;
}
.mobile-nav ul li:hover > ul,
.mobile-nav ul li ul:hover {
visibility: visible;
}
.mobile-nav ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 1024px;
}
.mobile-nav ul li ul li:hover {
background-color: #ccc;
width: 1024px;
}
}

Answer 1

<script>
document.getElementById("divID").style.visibility = "hidden";
</script>

您将需要创建一个.js函数并创建一个onClick="function((">

尝试使用 JavaScript 基础知识来修改基本的 CSS。

*请不要依赖CSS来修改网页上的所有活动。