Javascript 无法使用JS切换侧栏_Javascript_Html_Css_Django

Javascript 无法使用JS切换侧栏

javascript html css django

Javascript 无法使用JS切换侧栏,javascript,html,css,django,Javascript,Html,Css,Django,我在Django上的HTML文件中保存了所有CSS和Javascript，如下所示： <!doctype html> <html lang="en"> <head> <title>Dashboard</title>  <meta charset="utf-8"> <meta name="v

我在Django上的HTML文件中保存了所有CSS和Javascript，如下所示：

 <!doctype html>
    <html lang="en">
      <head>
        <title>Dashboard</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

      <script>
          function toggleSidebar(){
              document.getElementsByClassName("sidebar");
          }
      </script>


      <style type="text/css">

          .toggle-btn {
              position:absolute;
              left:180px;
              top:70px
          }

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

          .sidebar {
              height:100%;
              width:160px;
              position: fixed;
              z-index:1;
              top:0;
              let:0;
              background-color:#111;
              overflow-x: hidden;
              padding-top:70px;                                                  
          }

          .sidebar.active {
              left:0px
          }

          .sidebar a {
              padding:6px 8px 6px 16px;
              text-decoration: none;
              font-size:18px;
              color: #818181;
              display:block;

          }

           .sidebar a:hover {
               color:#ffffff;

          }

      </style>

  </head>


  <body>

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

      <div class="toggle-btn">
          <span></span>
          <span></span>
          <span></span>
      </div>

      <div class="sidebar">


          <a href="/categories">Categories</a>
          <a href="#">Test 1</a>
          <a href="#">Test 2</a>
          <a href="#">Test 3</a>
          <a href="#">Test 4</a>

      </div>


  </body>


<header class="site-header">

  <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
    <div class="container">


      <a class="navbar-brand mr-4" href="#">Home.com</a>


      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarToggle">
        <div class="navbar-nav mr-auto">
        </div>
        <!-- Navbar Right Side -->
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="#">Logout</a>
        </div>
      </div>
    </div>
  </nav>

<section class="hero">
            <div class="hero-inner">
                <h1>Centered Text</h1>

            </div>
        </section>



</header>

</body>    
</html>

到目前为止，它还不能正常工作，因为我是CSS和Javascript的绝对初学者。如果有人能指出我可能做错的事情，我将不胜感激

在

中，我可以修复切换功能，希望这有助于：

函数切换边栏（）{
var x=document.getElementsByClassName（“侧栏”）[0]；
if（x.classList.contains（'active'））{
x、 classList.remove（'active'）
返回；
}
x、 classList.add（'active'）
}

如果您查看侧边栏div，您将看到在toogle上添加和删除类

我可以修复切换功能，希望这对您有所帮助：

函数切换边栏（）{
var x=document.getElementsByClassName（“侧栏”）[0]；
if（x.classList.contains（'active'））{
x、 classList.remove（'active'）
返回；
}
x、 classList.add（'active'）
}

如果您检查侧边栏div，您将看到在toogle上添加和删除类，您可以使用方法。您需要在.toggle按钮上有一个带有方法名称的onclick事件（toggleSidebar），以便它知道在单击时调用它。您还可以向按钮中添加一个，而不是onclick

。切换btn{
位置：绝对位置；
左：180像素；
顶部：70像素；
}
.切换btn范围{
显示：块；
宽度：30px；
高度：5px；
背景：#000000；
利润率：5px0px；
}
.侧边栏{
身高：100%；
宽度：160px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
填充顶部：70px；
}
.侧边栏a{
填充：6px 8px 6px 16px；
文字装饰：无；
字号：18px；
颜色：#818181；
显示：块；
}


函数toggleSidebar（）{
$（“.sidebar”）.toggle（）；
}

您可以使用方法。您需要在.toggle按钮上有一个带有方法名称的onclick事件（toggleSidebar），以便它知道在单击时调用它。您还可以向按钮中添加一个，而不是onclick

。切换btn{
位置：绝对位置；
左：180像素；
顶部：70像素；
}
.切换btn范围{
显示：块；
宽度：30px；
高度：5px；
背景：#000000；
利润率：5px0px；
}
.侧边栏{
身高：100%；
宽度：160px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
填充顶部：70px；
}
.侧边栏a{
填充：6px 8px 6px 16px；
文字装饰：无；
字号：18px；
颜色：#818181；
显示：块；
}


函数toggleSidebar（）{
$（“.sidebar”）.toggle（）；
}

为什么汉堡包留在原来的位置而不移动到一边？toggleSideBar（）只是切换侧边栏。移动汉堡包的一种方法是改变左边的位置。您可以保留一个count变量，并根据count增加或减少左侧定位。您可以使用jQuery的css（），也可以只使用JS中的样式。希望对你有所帮助。我建议你先花点时间在上面，然后再向别人寻求帮助。堆栈溢出并不意味着其他人可以执行您的代码。然后，您可以使用您正在发行的新版本以及您尝试过的内容或提出的新问题来编辑此问题。我尝试了很多方法，包括您的代码，但迄今为止都没有任何结果。为什么汉堡包停留在原来的位置而不移动到旁边？toggleSideBar（）只是切换侧边栏。移动汉堡包的一种方法是改变左边的位置。您可以保留一个count变量，并根据count增加或减少左侧定位。您可以使用jQuery的css（），也可以只使用JS中的样式。希望对你有所帮助。我建议你先花点时间在上面，然后再向别人寻求帮助。堆栈溢出并不意味着其他人可以执行您的代码。然后，您可以使用您正在发行的新版本以及您尝试过的内容或提出的新问题来编辑此问题。我尝试了很多方法，包括您的代码，但到目前为止，没有任何方法被证明有效。

<script>
      function toggleSidebar(){
          document.getElementsByClassName("sidebar");
      }
  </script>