Bootstrap4 和列表组可折叠的 Scrollspy 问题

Question

我更新了我的应用程序以使用 Boostrap 4.1，现在我在使用 ScrollSpy 时出现奇怪的行为。我正在尝试创建一个可折叠菜单，并且我正在使用 list-group/list-group-item。但出于某种原因，当从第一项向下滚动到第二项时，滚动会转到主锚点（到主菜单），而不是停留在第一项（直到到达第二项）。

如果我对问题的解释不够准确，我深表歉意，但我相信 fiddle 将有助于更好地理解它：

http://jsfiddle.net/aq9Laaew/189549/

这是菜单：

<nav class="list-group fixedMenu" id="list-example">
      <a href="#menuSpy" data-toggle="collapse" class="list-group-item" aria-expanded="true">
          <span>Main Menu</span>
      </a>
      <ul class="sub collapse show" id="menuSpy">
          <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
          <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
          <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
          <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
      </ul>
</nav>

这是内容：

<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
    <h4 id="list-item-1">Item 1</h4>
    <p>...</p>
    <h4 id="list-item-2">Item 2</h4>
    <p>...</p>
    <h4 id="list-item-3">Item 3</h4>
    <p>...</p>
    <h4 id="list-item-4">Item 4</h4>
    <p>...</p>
</div>

感谢任何帮助！

提前致谢。

Answer 1

scrollspy 目标菜单应该是 #menuSpy。否则它将在滚动时以列表示例中的第一个 link 为目标。

$('body').scrollspy({
    target: '#menuSpy'
});

http://jsfiddle.net/o7tf53ce/

更新了多个菜单：https://www.codeply.com/go/aMpKp07E0t

Bootstrap4 和列表组可折叠的 Scrollspy 问题

Scrollspy issues with Bootstrap4 and list-group collapsible

scrollspy

bootstrap-4