モバイルビューのナビで問題が発生しました

Question

私のモバイルベータに表示されるアイコンを表示しようとしていますが、ここではメニューを表示して非表示にすることができます。 私のコードはうまく動作しません。

私の問題は、私が間違っているのかわから、誰かが正しい方向に私を指すことができないのidの、ここで

入力してください把握しようとしていますか？事前に感謝

//これは、私はあなたが同じ名前を共有する2つのIDを持っている

<nav class="navMenu"> 
<input id="menu-icon" type="checkbox"> 
<label id="menu-icon" class="iconMenuLbl" for="menu-icon"></label> 
<ul> 

    <li> 
     <a href=""><img class="navImg" src="media/Home-tall.png" alt=""></a> 
    </li> 
    <li> 
     <a href="summary"><img class="navImg" src="media/My-Details-tall.png" alt=""></a> 
    </li> 
    <li> 
     <a href="loans"><img class="navImg" src="media/My-Loans-tall.png" alt=""></a> 
    </li> 
    <li id="loggedin-box" class=""> 
     <form method="POST" action="login"> 
     <div> 
      <strong>some name</strong> 
     </div> 
     <button style="padding:0px;" name="logout" type="submit"> 
     <img class="navImg" src="media/Sign-Out.png"> 
     </button> 
     </form> 
    </li> 
</ul> 
</nav> 

// JSファイル

$(function() { 
    var menuVisible = false; 
    $('#menu-icon').click(function() { 
    if (menuVisible) { 
     $('.navMenu').css({'display':'none'}); 
     menuVisible = false; 
     return; 
    } 
    $('.navMenu').css({'display':'block'}); 
    menuVisible = true; 
    }); 
    $('.navMenu').click(function() { 
    $(this).css({'display':'none'}); 
    menuVisible = false; 
    }); 
}); 

Answer 1

持っているものです。 'menu-icon'のいずれかのIDを別の名前に変更してみてください。 IDは一意でなければなりません。 - また、入力フィールドをnavタグから移動します。