Почему этот простой переключатель 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

попробуйте удалить пробел перед .active. поэтому она становится

.menu_link.active {} 

И

nav.active {}