JQuery 没有点击功能 adding/removing class

Question

我正在尝试制作一个可点击的图片，让我的侧边菜单可以 show/hide。如果我为 "menu-open" 手动插入 class，这会起作用，但是我的点击功能不会触发此 class，我一直在搜索但没有找到答案，非常感谢.

这是我目前所掌握的。

<!doctype html>

<html>
<head>
<title>TESTING</title>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html">
<meta name="viewport" content="width-device-width,, initial scale=1">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>

<body  class="menu">
<header>
    <a href="#" class="menu-toggle"><img src="img/logo-white.png" width="150px"/></a>
    <nav class="menu-side">
        <ul>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#projects">PROJECTS</a></li>
            <li><a href="#contact us">CONTACT US</a></li>
        </ul>   
    </nav>
    <div>

    </div>

</header>   

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    (function(){
        var body = $('body');
        $('.menu-toggle').click(function(){
            $(body)toggleClass('menu-open');
        });
    });
</script>

</body>
</html>

我的 CSS 是：

.menu{
    overflow-x:hidden;
    position: relative;
    left:0px;
}
.menu-open{
    margin-left:201px;
}
.menu-open .menu-side{
    left:0px;   
}
.menu-side{
    background-color: #333;
    border-right: 1px solid #000;
    color: #fff;
    position: fixed;
    top: 0px;
    left: -201px;
    width: 200px;
    height: 100%;
}

Answer 1

你少了一个经期

$(body).toggleClass('menu-open');

Answer 2

$(document).ready(function(){
        var body = $('body');
        $('.menu-toggle').click(function(){
            $(body).toggleClass('menu-open');
        });
    });

这将在 body

上切换 class menu-open

JQuery 没有点击功能 adding/removing class

JQuery click function not adding/removing class

css

jquery

menu