使用 Bootstrap 5 的带有切换按钮的导航栏不起作用

Question

我正在开发一个网络项目，我需要实现一个响应式侧边栏，可以使用导航栏中的按钮进行切换。我使用 Bootstrap 进行布局，并且在实现此功能时遇到了一些困难。默认情况下，侧边栏在移动设备上应隐藏，并且仅在用户单击导航栏中的菜单按钮时显示。在较大的屏幕上，侧边栏应该是可见的，无需任何额外的交互。我尝试在 CSS 中使用媒体查询来根据屏幕尺寸控制侧边栏的可见性，并且我已经实现了 JavaScript 功能，以便在单击导航栏中的菜单图标时切换侧边栏。但是，当我单击菜单图标时，侧边栏不显示。有人可以提供有关如何使用 Bootstrap 5 正确实现此响应式侧边栏功能的指导吗？

function toggleSidebar() {
            var sidebar = document.getElementById("sidebar");
            if (sidebar.classList.contains('show')) {
                sidebar.classList.remove('show');
            } else {
                sidebar.classList.add('show');
            }
        }

.sidebar {
    min-height: calc(100vh - 56px);
    width: 240px; 
  }

  @media (max-width: 767.98px) {
        .sidebar {
            display: none;
        }
    }

  @media (min-width: 768px) {
        .sidebar {
            position: fixed;
            top: 56px; 
            bottom: 0;
            left: 0;
            z-index: 100; 
            padding: 20px 0;
            overflow-x: hidden;
            overflow-y: auto;
            border-right: 1px solid #e7e7e7;
        }
    }

<!-- Navbar -->
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Logo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" onclick="toggleSidebar()">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>
  
  <!-- Sidebar -->
<div class="d-flex flex-column flex-shrink-0 bg-light sidebar d-none d-lg-block">
    <a href="#" class="d-block p-3 link-dark text-decoration-none" aria-label="Sidebar">
        <span class="fs-5">Sidebar</span>
    </a>
    <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
            <a href="#" class="nav-link" aria-current="page">Dashboard</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link link-dark">Orders</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link link-dark">Products</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link link-dark">Customers</a>
        </li>
    </ul>
</div>

      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <!-- Content Area -->
  <div class="container-fluid main-content">
    <div class="row">
      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <div class="pt-3 pb-2 mb-3 border-bottom">
          <h1 class="h2">Content Area</h1>
        </div>
        <h4>Main</h4>
      </main>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
              crossorigin="anonymous"></script>

Answer 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>