爲什麼這個簡單的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 {}