Bootstrap 4 Scrollspy存在Bootstrap4和列表组可折叠的问题

我将我的应用程序更新为使用Boostrap4.1，现在我在使用ScrollSpy时出现了一种奇怪的行为。 我正在尝试创建一个可折叠菜单，并且正在使用列表组/列表组项。但是，由于某种原因，当从第一个项目向下滚动到第二个项目时，滚动会转到主锚点（到主菜单），而不是停留在第一个项目上（直到到达第二个项目）

如果我对问题的解释不够准确，我很抱歉，但我相信这把小提琴将有助于更好地理解它：

这是菜单：

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

项目1

项目2

项目3

项目4

感谢您的帮助

---

提前谢谢。

scrollspy目标菜单应该是

#menuSpy

。否则，当它滚动时，它将以列表示例中的第一个链接为目标

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

---

更新了多个菜单：

解决了一半问题。如果在这个菜单之后还有另一个可折叠菜单，会发生什么？（请参阅fiddle:）您应该为menuSpy和menuSpy2添加锚定，并将整个

列表示例作为目标。还可以使用50的偏移量来适应菜单项的高度：