Probleme mit dem Nav in der mobilen Ansicht

Question

Ich versuche, ein Symbol zu haben, das in meinem mobilen veiw angezeigt wird, wo Sie klicken können, zeigen Sie und verstecken Sie das Menü, im Moment funktioniert mein Code nicht, es überhaupt nicht geöffnet

mein Problem versucht, hier ids und Eingänge

herauszufinden

nicht sicher, was ich falsch mache, mich in die richtige Richtung bitte jemand zeigen könnte? Vielen Dank im Voraus

// Das ist, was ich habe

<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

Sie haben zwei IDs teilen den gleichen Namen einreichen. 'menu-icon' versuche eine der IDs auf einen anderen Namen zu ändern. IDs sollten eindeutig sein. - Bewegen Sie auch Ihr Eingabefeld aus dem Nav-Tag.