モバイルナビはクリックできません

Question

私はドロップダウンモバイルナビバーで応答性の高いウェブサイトを作成しようとしていますが、メニューは開きますが、クリックするとすぐに終了します。

私はまた、アンドロイド版のクロムで見ると、navbarと実際のメニューとの間にギャップがあることに気付きました。

私は頭の中を包み込むことができず、それを修正することはできません。

マイ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

トグルクラス.hamburgerではJavaScriptを経由してクリックし、CSSでこのクラスに反応されます。 CSSで

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

メニューの表示を切り替える：

#menu.visible { 
    display: block; 
}