使用 jQuery 添加、移除类名的方法实现移动端的侧边栏效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 去除浏览器的默认样式 */
    html, body, ul, li, div, p {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      overflow: hidden;
      /* 防止内容宽度超出屏幕宽度出现水平滚动条 */
    }
    ul {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
    
    /* 内容页的样式 */
    .content {
      position: relative;
      transition: all ease-out .2s;
      left: 0;
    }
    .content.active {
      left: 200px;
      user-select: none;
    }
    .btn {
      padding: 8px 16px;
    }
    .description {
      margin-top: 30px;
    }

    /* 移动端垂直导航栏导航栏的样式 */
    .nav {
      position: absolute;
      top: 30px;
      transform: translateX(-100%);
      transition: all ease-out .2s;
    }
    .nav.active {
      transform: translateX(0);
    }

    /* 点击按钮后出现的蒙版的样式 */
    .mask {
      position: absolute;
      left: 100%;
      top: 0;
      bottom: 0;
      width: 100%;
      background: rgba(255, 255, 255, 1);
      transition: background .2s ease-out;
    }
    .mask.active {
      left: 0;
      background: rgba(0, 0, 0, .2)
    }
  </style>
</head>
<body>
  <div class="content">
    <a class="btn" href="javascript:">按钮</a>
    <div class="description">
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
    </div>
    <div class="mask"></div>
  </div>
  
  <div class="nav">
    <ul>
      <li>选项一</li>
      <li>选项二</li>
      <li>选项三</li>
    </ul>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <script>
    var count = 1;  // 定义点击的次数
    $(".btn").click(function(){
      if(count %2 == 1) {
        $(".content").addClass("active");
        $(".nav").addClass("active");
        $(".mask").addClass("active");
      }
      count++;
    })
    $(".mask").click(function(){
      if(count %2 == 0) {
        $(".content").removeClass("active");
        $(".nav").removeClass("active");
        $(".mask").removeClass("active");
      }
      count++;
    })
    
  </script>
</body>
</html>
注: 不要纠结样式的啦(我知道很难看), 只是提供思路
原文地址：https://www.cnblogs.com/hros/p/11428228.html