проблемы с навигацией в мобильном режиме

Question

Я пытаюсь иметь значок, который будет отображаться в моем мобильном телефоне, где вы можете щелкнуть мышью на шоу и скрыть меню, прямо сейчас мой код не работает, он вообще не открывается

моя проблема пытается выяснить, идентификаторы и входы здесь

не уверен, что я делаю не так, может кто-то мне точку в правильном направлении, пожалуйста? Заранее спасибо

// это то, что у меня есть

<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' попробуйте изменить один из идентификаторов на другое имя. Идентификаторы должны быть уникальными. - ТАКЖЕ переместите свое поле ввода из тега nav.