索引文件

索引文件是调用CSS文件和JavaScript文件或与之同步的文件

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="toggleMenu.css" type="text/css" rel="stylesheet">
    <script link="toggleMenu.js"></script>  

</head>

<body>

    <div id="sidebar">
        <div class="toggle-btn" onclick="toggleSidebar()">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div> 

</body>
</html>

CSS文件：

CSS文件定义了具有定义属性的各种类

* {
    margin:0px;
    padding:0px;
    font-family: sans-serif;
}

#sidebar {
    position:fixed;
    width:200px;
    height:100%;
    background:#151719;
    left:-200px;
    transition: all 500ms linear;
}

#sidebar.active{
    left:0px;
}

#sidebar ul li {
    color:rgba(230, 230, 230, 0.9);
    list-style:none;
    padding:15px 10px;
    border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}

#sidebar .toggle-btn {
    position:absolute;
    left:230px;
    top:20px;
}

#sidebar .toggle-btn span {
    display: block;
    width:30px;
    height:5px;
    background:#151719;
    margin: 5px 0px;
}

JavaScript

当用户单击“切换”按钮（toggle-btn）时，JavaScript处理滑动效果

function toggleSidebar() {

    document.getElementByID("sidebar").classlist.toggle("active");

}

Answer 1

您的切换功能中有几次错字，应该是：

function toggleSidebar() {
  document.getElementById("sidebar").classList.toggle("active");
}

这是一个有效的版本，请点击下面的运行代码段：

function toggleSidebar() {
    document.getElementById("sidebar").classList.toggle("active");
}

* {
    margin:0px;
    padding:0px;
    font-family: sans-serif;
}

#sidebar {
    position:fixed;
    width:200px;
    height:100%;
    background:#151719;
    left:-200px;
    transition: all 500ms linear;
}

#sidebar.active{
    left:0px;
}

#sidebar ul li {
    color:rgba(230, 230, 230, 0.9);
    list-style:none;
    padding:15px 10px;
    border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}

#sidebar .toggle-btn {
    position:absolute;
    left:230px;
    top:20px;
}

#sidebar .toggle-btn span {
    display: block;
    width:30px;
    height:5px;
    background:#151719;
    margin: 5px 0px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div id="sidebar">
  <div class="toggle-btn" onclick="toggleSidebar()">
      <span></span>
      <span></span>
      <span></span>
  </div>
  <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
  </ul>
</div>

Answer 2

您需要解决2点问题

脚本应该使用src属性而不是 link ，因此它将是

<script src="toggleMenu.js"></script>

并且classList应该用大写L编写，因此它不是document.getElementById("sidebar").classlist.toggle("active"); 应该是

document.getElementById("sidebar").classList.toggle("active");

Answer 3

https://codepen.io/divided7/pen/PoPrwPe我为您制作了一个码本，并得到了固定的结果。另外，在脚本标记的代码中将link更改为src，并输入错误（classlist更改为classList）

动画/滑动侧菜单不向左滑动？

索引文件

CSS文件：

JavaScript

3 个答案: