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 {

能见度：可见;显示：块;宽度：1,024;高度：400像素; background-image：url（'../ 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 =＆＃34;函数（）＆＃34;

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

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

CSS / HTML菜单 - 无法关闭iOS

1 个答案: