为什么这个简单的jQuery切换不起作用？

Question

我想知道为什么这个toggle不起作用。 addClass方法，因此隐藏nav运行良好...是否有一个简单的错字我错过了或者我得到的概念错了？ 感谢您的支持。

$(document).ready(function() { 
    $("body").addClass("js"); 

    var $menu = $("#menu"), 
    $menulink = $(".menu_link"); 

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

.menu_link { 
    position: absolute; 
    top: 1.5rem; 
    right: 1.5rem; 
    color: black; 
    background-color: #fff; 
    padding: 1rem; 
    border-radius: 50%; 
} 
.menu_link .active { 
    background-color: red; 
} 
.js nav { 
    overflow: hidden; 
    max-height: 0; 
} 
nav .active { 
    max-height: 15rem; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="#menu" class="menu_link">Inhalt</a> 
<nav id="menu"> 
    <ul> 
    <li><a href="#">Punkt 1</a></li> 
    <li><a href="#">Punkt 2</a></li> 
    <li><a href="#">Punkt 3</a></li> 
    <li><a href="#">Punkt 4</a></li> 
    </ul> 
</nav> 

Answer 1

的错误是在你的CSS;该.active类是直接放置在nav和.menu_link元素，所以你需要删除他们的选择之间的空间：

.menu_link.active { 
    background-color: red; 
} 

nav.active { 
    max-height: 15rem; 
} 

Working example

Answer 2

尝试。主动删除之前的空间。因此它成为

.menu_link.active {} 

而且

nav.active {}