javascript - 无法使用 JS 切换侧边栏-6ren

javascript - 无法使用 JS 切换侧边栏

转载作者：行者123 更新时间：2023-11-28 03:03:39

25

4

我将所有 CSS 和 Javascript 都放在 Django 上的 HTML 文件中，如下所示:

 <!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>

我想切换侧边栏，这意味着当有人点击 spann 标记指示的汉堡菜单时触发隐藏功能，您可能可以通过以下方式看出:

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

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

在 CodePen

最佳答案

我可以修复切换功能，希望这有帮助:

function toggleSidebar() {
  var x = document.getElementsByClassName("sidebar")[0];

  if(x.classList.contains('active')) {
    x.classList.remove('active')
    return;
  }

  x.classList.add('active')
}

如果您检查侧边栏 div，您会看到该类正在 Toogle 上添加和删除

关于javascript - 无法使用 JS 切换侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60782735/

25

4

0

文章推荐： c++ - boost circular_buffer 或堆排序性能

文章推荐：链接不工作的 HTML/CSS 轨道动画

文章推荐： C++/CX 属性在集合上抛出错误

文章推荐： javascript - 具有 "left: 0px"的元素上的绑定(bind)事件

python - Tkinter 侧边栏
我想创建一个类似 ABOVE 的可折叠侧边栏。在折叠的表单中，侧边栏将只有选项图标，当您将鼠标悬停在栏上时，它会展开，向您显示图标的描述/名称。如果您单击该图标，它将带您进入该图标指定的功能，例如
右侧的 Swift 侧边栏
由于我需要在右侧打开侧边栏，如何将其从左侧更改为右侧？我使用的代码很简单: if revealViewController() != nil { Menubutton.target
整个高度的 CSS 侧边栏
我在使用高度标签时遇到了问题。我想制作一个背景延伸到页面底部的侧边栏。我已将高度设置为 100%，但这并不像我想象的那样有效。这是我的侧边栏代码。 #side{ box-sizing:b
javascript - 侧边栏 - 关闭和打开过滤器列表
我正在为我的网站构建一个过滤器侧边栏，我希望能够通过按 btn 打开和关闭过滤器列表。 jQuery('.parent > .children').parent().click(function()
css - Bootstrap 侧边栏
我将如何使 CONTENT HERE 文本进入红色框区域。我几乎尝试了所有我能想到的方法，但没有任何效果。我什至尝试将文本排成一行，然后将其类设置为“行向左拉”。这是我的代码:
控制好你的 Wordpress 侧边栏
当然 Wordpress 2.7 里有“小工具”选项也能控制 Widget ，但是反复实验后发现样式无法统一，可控性较低。个人认为是比较鸡肋的功能，这里就不谈了。进入正题。侧边栏
qt - 应用程序查看器设置全屏功能不隐藏 ubuntu 侧边栏
我正在为使用 Qt 和 QML for Ubuntu Linux 的应用程序构建 UI。我有一个带有 Canvas 元素的查看器窗口，默认情况下应该是全屏的。打开应用程序时效果很好(即隐藏了 Ubun
css - 小屏幕时在正文后显示 float 侧边栏
我有一个两列布局。左侧是正文，右侧是侧边栏 ( float: right; width: 30% )。在小型浏览器上，我想先显示正文，然后是侧边栏。但是如果我删除 float从带有媒体查询的侧边栏中
reactjs - 单击任何链接时如何关闭 react 侧边栏？
我是 React 的新手，试图让这个组件工作:https://github.com/balloob/react-sidebar 它有效，除了在跟随链接时侧边栏不会关闭。如何单击侧边栏链接关闭侧边栏？
sublimetext2 - 右侧的 Sublime 侧边栏
我开始使用 Sublime Text 2。但是有一个小问题，找不到将侧栏(文件夹平移)移动到窗口右侧的选项。你能告诉我我该怎么做吗？是否有任何插件或设置选项。最佳答案遗憾的是，不支持此功能。看
r - 侧边栏 Shiny 太长怎么办？
在下面的玩具示例中，我在侧边栏中有很多 slider 。对于最后一个，我再也看不到正确的情节了。这个问题有什么不涉及删除 slider 的解决方案吗？ # 01-kmeans-app palette(
macos - 将项目添加到 Finder 侧边栏
我想向 Finder 侧边栏添加一个新项目。我发现 Finder 将“地点”列表保存在 `~/Library/Preferences/com.apple.sidebarlists.plist 中。我能
javascript - 固定 float 侧边栏
我正在寻找创建一个固定侧边栏，与苹果的(就功能而言)非常相似。当您在他们的商店中配置您的 Mac 时，当您向下滚动页面时，右侧的购物篮会固定位置；完美。 position:fixed 是相对于视口(
ios - 创建 SwiftUI 侧边栏
我想使用 SwiftUI 构建一个非常简单的 iOS 14 侧边栏。设置很简单，我有三个 View HomeView , LibraryView和 SettingsView和一个代表每个屏幕的枚举。
javascript - 带有固定顶部菜单的语义 UI 侧边栏
Semantic-UI 预先警告其 sidebar page “当侧边栏出现时，固定位置内容可能无法更改其位置。”然后它提供了两种可能的解决方案。令人惊讶的是，在同一个页面和整个网站上，Semant
reactjs - React Pro 侧边栏
有人用过 React Pro 侧边栏吗？有人可以告诉我如何使用 sass 侧边栏组件以及如何增加侧边栏的长度。是否还有其他库提供了如何使用其侧边栏的示例。这是 React Pro 侧边栏示例。
reactjs - React Pro 侧边栏
有人用过 React Pro 侧边栏吗？有人可以告诉我如何使用 sass 侧边栏组件以及如何增加侧边栏的长度。是否还有其他库提供了如何使用其侧边栏的示例。这是 React Pro 侧边栏示例。
javascript - 带有反应路由器的 react 侧边栏
我是 React 的新手，一直在尝试寻找一个示例，说明如何在 reactjs 中创建侧边导航栏并将 reactrouter 与它一起使用。现在，我有一个如下所示的“侧边导航” Pane : impor
javascript - 将按钮附加到语义 ui 侧边栏
我正在尝试制作一个像 semantic-ui.com 上那样的简单侧边栏，只是我希望它位于右侧。看起来很简单，除了让按钮附加是我最大的问题。你可以在 jsfiddle 看到它，有点工作......HT
CSS:侧边栏 div 不会留在原地!
我附上了我的 HTML 和 CSS，希望有人能帮助我。基本上我有一个右侧边栏 div，其中的内容不会推到顶部。当我尝试使用位置和高度属性时，内容只是漂浮在整个页面上，甚至不会停留在右侧边栏中。我希望有

首页

博学

6Ren·AI

商城

javascript - 无法使用 JS 切换侧边栏