Responsive Menu funktioniert nicht (Menü wird geschlossen)

Question

Ich habe dieses Menü in html/css/javascript und wenn Sie auf das Menü klicken, dann versuchen Sie, auf eine der Seiten im Menü zu gehen, leitet nichts um und das Menü schließt. Auch wenn in html hinzugefügt ich die Tags mit href zu diesen Seiten

HTML:

<div id="pattern" class="pattern menu-link" style="max-width:574px; min-width:300px;"> 
    <a href="#"><span style="font-size:27px; font-weight: bold; padding-top: 20px;" id="menustylish">&#9776; MENU</span></a> 
    <nav id="menu" role="navigation"> 
    <ul> 
     <li><a style="color:white;" href="index.html">Homepage</a></li> 
     <li><a style="color:white;" href="login.html">Log in</a></li> 
     <li><a style="color:white;" href="signup.html">Sign up</a></li> 
    </ul> 
    </nav> 
</div> 

CSS:

a { 
    color: #DADDDE; 
    text-decoration: none; 
} 
a:hover, 
a:focus { 
    color: #DADDDE; 
} 
p { 
    margin: 1em; 
    text-align: center; 
} 
body p a { 
    color: #DADDDE; 
} 
.pattern { 
    background: #333; 
    border-bottom: 1px solid #808080; 
    margin-bottom: 1em; 
    overflow: hidden; 
} 
a.menu-link { 
    float: left; 
    display: block; 
    padding: 1em; 
} 
nav[role=navigation] { 
    clear: both; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 
.js nav[role=navigation] { 
    overflow: hidden; 
    max-height: 0; 
} 
nav[role=navigation].active { 
    max-height: 15em; 
} 
nav[role=navigation] ul { 
    margin: 0; 
    padding: 0; 
    border-top: 1px solid #808080; 
} 
nav[role=navigation] li a { 
    display: block; 
    padding: 0.8em; 
    border-bottom: 1px solid #808080; 
} 
@media screen and (min-width: 48.25em) { 
    a.menu-link { 
    display: none; 
    } 
    .js nav[role=navigation] { 
    max-height: none; 
    } 
    nav[role=navigation] ul { 
    margin: 0 0 0 -0.25em; 
    border: 0; 
    } 
    nav[role=navigation] li { 
    display: inline-block; 
    margin: 0 0.25em; 
    } 
    nav[role=navigation] li a { 
    border: 0; 
    } 
} 

javascript:

$(document).ready(function() { 
    $('body').addClass('js'); 
    var $menu = $('#menu'), 
    $menulink = $('.menu-link'); 

    $menulink.click(function() { 
    $menulink.toggleClass('active'); 
    $menu.toggleClass('active'); 
    return false; 
    }); 
}); 

Answer 1

dies tun wird, hier Sie gibt false von der Click-Funktion zurück, so dass es das Standardverhalten der Umleitung von der Verbindung verhindert. also nicht zurück false und es wird funktionieren

$(document).ready(function() { 
    $('body').addClass('js'); 
    var $menu = $('#menu'), 
    $menulink = $('.menu-link'); 

    $menulink.click(function() { 
    $menulink.toggleClass('active'); 
    $menu.toggleClass('active'); 
    //return false; // Don't return anything 
    }); 
});