1

我已经实现了一个 Offcanvas 侧边栏。它显示得很好，但侧边栏中的链接实际上都不起作用。当我单击链接时，没有任何反应。我认为我对机制的理解不够好，所以这里的任何指导都将不胜感激。

我正在使用 Laravel，因此此代码位于为每个页面加载的视图中（例如 app.blade.php）。侧边栏工作正常，可以使用按钮正确切换，但链接不会带我去任何地方。我错过了什么？

这是代码。Link1 和 Link2 在我的测试应用程序中是有效的 Laravel 路由。

<body class="d-flex flex-column min-vh-100">
    <a class="btn btn-primary float-end" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
        Toggle Menu
    </a>
    <nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
      <div class="offcanvas-header border-bottom">
        <a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
          <h4>
            My site
          </h4>
        </a>
      </div>
      <div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">
        
        <ul class="list-unstyled ps-0">
          <li class="mb-1">
            <button
              class="btn btn-toggle align-items-center rounded"
              data-bs-toggle="collapse"
              data-bs-target="#experience-collapse"
              aria-expanded="true"
              aria-controls="experience-collapse"
            >
            <i class="bi bi-list-ol"></i>&nbsp;&nbsp;Links
            </button>
            <div class="collapse show" id="experience-collapse" style="">
              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                <li><a href="/link1" class="rounded" id="link1"><i class="bi bi-arrow-down-up"></i>&nbsp;&nbsp;Link 1</a></li>
                <li><a href="/link2" class="rounded"><i class="bi bi-search"></i>&nbsp;&nbsp;Link2</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </nav>  
  </body>
4

0 回答 0