响应菜单不工作（菜单正在关闭）

Question

我在html/css/javascript中有这个菜单，当你点击菜单，然后尝试去菜单中的某个页面，没有任何重定向和菜单关闭。即使在HTML我添加HREF的标签

这些页面

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

这样做，在这里你从click函数返回false，所以它会阻止它从链接重新发送的默认行为。所以不要返回假，它会工作

$(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 
    }); 
});