关于#javascript#的问题：想实现点击nav-button给类menu-dark-backdrop添加一个in的类名称再给类leftmenu添加一个in的类名称然后点击空白区域 删除in类名称



```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
    <style>
         li{list-style:none;}
         .menu-dark-backdrop {
            background: rgba(0,0,0,0);
            transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
            -webkit-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }
        .menu-dark-backdrop.in {
            height: 100%;
            z-index: 90001;
            background: rgba(0,0,0,0.5);
        }

        .leftMenu {
    background: #fff;
    left: -1000px;
    position: fixed;
    top: 50px;
    display: block;
    height: 100%;
    width: 68%;
    min-width: 140px;
    max-width: 440px;
    z-index: 90002;
    transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    position: fixed;
    overflow: auto;
}   
        .leftMenu.in {  
            left: 0;}



    </style>

    <ul class="nav-right">
        <div class="menu-dark-backdrop"></div>
         <li class="nav-button">
            <div  class="nav-loader"><i class="layui-icon layui-icon-spread-left">123</i></div>
            <div  class="leftMenu">
                <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
               </div>
        </li>
    </ul>
<script>
    $(document).ready(function(){
        $('.nav-button').click(function(){
            $('.menu-dark-bacdrop,.leftMenu').addClass('in');
            setTimeout(function(){
                $('.nav-buttin').hide();
                $('.menu-dark-bacdrop,.leftMenu').removeClass('in');
            },3000);
        });
        
        $('.nav-button').click(function(){
            $('.menu-dark-bacdrop,.leftMenu').addClass('in');
            setTimeout(function(){
                $('.nav-buttin').show();
                $('.menu-dark-bacdrop,.leftMenu').removeClass('in');
            },3000);
        });
        
    });

    </script>
</body>
</html>

想实现
点击nav-button
给类menu-dark-backdrop添加一个in的类名称
再给类leftmenu添加一个in的类名称
然后点击空白区域 删除in类名称。
其实就是想实现抽屉式导航菜单。
但是写了半天JS还是报错 求DS帮帮忙

可以网上看看bootstrap的相关模板，比如aceadmin等等，有丰富的案例介绍。

报什么错？ 思路有了照着思路一步一步来。每写几行就试试