Scollspy 删除活动类但不添加到下一个 li

Question

我使用 Bootstrap 的 scroll-spy 组件有一些不寻常的效果。当我滚动经过第一个锚定部分时，scroll-spy 函数正确地删除了活动类 - 因此该函数正在运行 - 但它不会在到达下一个 li 时将活动类应用到下一个 li。我已将父部分包装到 div 中的导航列表，并为其指定了 data-bs-target 属性，并从页面中删除了所有其他 data-bs-target="scrollspy" 属性。尽管如此，只有第一个 li 应用了 .active。当然，部分 ID 与列表项的 hrefs 相匹配。 classList.toggle() 方法有些混乱（假设正在使用的是这种方法），我对引擎盖下的 Bootstrap 了解不够，无法将其筛选出来。任何帮助将不胜感激。这是我完成学校 Bootstrap 项目所需的最后一个组件。我在下面包含了一个片段。完整的代码库位于https://github.com/treycoggins/web210/tree/main/week7

<!-- Main Content section -->
 <div data-bs-target="#navbar" data-bs-spy="scroll" tabindex="0" data-bs-offset="0">
    <main class="main" id="home">
      <section class="hero d-flex flex-column justify-content-evenly">
  
        <div class="row">
          <div class="hero__header offset-1 col-10 col-sm-7 display-1">
            From sun up to sun down, we have the best party in town.
          </div>
        </div>
  
        <div class="row m-0">
          <div class="col-11 col-sm-10 col-md-8 col-lg-7 offset-1 offset-sm-2 offset-md-4 offset-lg-5">
            <p class="display-3 display-lg-1 text-light fw-bold">
              Wednesday, June 24
            </p>
          </div>
          <div class="row">
            <div class="col-5 offset-1 offset-sm-2 offset-md-5">
              <p class="hero__header__sub col-4 fs-2 fw-bolder bg-danger rounded-5 text-white my-4 px-3 py-1">
                <i class="fa fa-map-marker fa-fw text-light"></i>
                Salvage Station&nbsp;<span class="d-none d-lg-inline">&nbsp;|&nbsp;468 Riverside
                  Dr.</span>&nbsp;|&nbsp;Asheville, NC
              </p>
            </div>
          </div>
          <div class="row m-0">
            <div class="col offset-1 offset-sm-2 offset-md-5">
              <a href="#book" role="button" class="btn btn__book fs-1 fw-bold btn-info text-light py-2 rounded-5"
                data-bs-toggle="modal" data-bs-target="#purchase-modal">
                Buy Tickets Now
              </a>
            </div>
          </div>
        </div>
      </section>
   </main>
 </div>