Question

我正在尝试制作一个可点击的图片，以便我的侧边菜单显示/隐藏。如果我手动插入“菜单打开”类，这是有效的，但是我的点击功能不会触发这个类，我一直在搜索，但未能提出答案，非常感谢。

这是我到目前为止所做的。

<!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');
        });
    });

这将切换menu-open

上的课程body

JQuery单击函数不添加/删除类

2 个答案: