html - 移动导航不可点击

Question

我正在尝试制作一个带有下拉移动导航栏的响应式网站，菜单会打开，但当您尝试单击它时，它会立即关闭。

我还注意到，在 android 版 chrome 上查看时，导航栏和实际菜单之间存在间隙。

我无法理解它，也不知道如何修复它。

我的 JSFiddle:https://jsfiddle.net/91t2hp3p/1/

代码:

<div class="nav animated slideInDown">
       <img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-256.png" alt="" class="hamburger">
       <ul id="menu">
           <li><a href="#home">HOME</a></li>
           <li><a href="#aboutme">ABOUT ME</a></li>
           <li><a href="#portfolio">PORTFOLIO</a></li>
           <li><a href="#contact">CONTACT</a></li>
       </ul>

.nav {
    width: 100%;
    height: 10%;
    line-height: 10vh;
    background-color: #F2F2F2;
    border-bottom: 1px solid #E4E4E4;
    text-align: center;
    position: fixed;
    z-index: 999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.nav .hamburger {
    display: none;
}

.nav .logo h1 {
    color: #000;
    font-size: 32px;
}

.nav ul {
    height: 100%;
    text-align: center;

}

.nav ul li {
    display: inline-block;
    list-style: none;
    padding: 0 20px 0 20px;
    vertical-align: top;
    position: relative;
}

.nav ul a {
    color: #000;
    text-decoration: none;
}

.nav a:hover {
    color: #999;
}

@media only screen and (max-width: 850px){
    .up {
        margin-right: 8px;
    }

    .nav .hamburger {
        height: 6vh;
        width: 6vh;
        display: inline-block;
        float: left;
        margin: 2vh 0 0 2vh;
    }

    .nav ul {
        visibility: hidden;
        float: none;
        padding-top: 10vh;
        display: block;
    }

    .nav .hamburger:hover ~ ul {
        visibility: visible;
        width: 100%;
        margin: 0;
    }

    .nav ul li {
        display: block;
        background-color: #F2F2F2;
    }
}

感谢阅读:)

Answer 1

当通过 JavaScript 单击 .hamburger 时切换一个类，并在 CSS 中对此类作出 react 。

$('.hamburger').click(function(e) {
    e.preventDefault();
    $('#menu').toggleClass('visible');
});

在 CSS 中切换菜单的可见性:

#menu.visible {
    display: block;
}