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中对此类做出反应。

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

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

#menu.visible {
    display: block;
}

移动导航无法点击

1 个答案: