时间戳

首页 > 解决方案 > Bootstrap4 和 list-group 可折叠的 Scrollspy 问题

bootstrap-4 - Bootstrap4 和 list-group 可折叠的 Scrollspy 问题

问题描述

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

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

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>

任何帮助表示赞赏！

先感谢您。

标签： bootstrap-4scrollspy

解决方案

The scrollspy target menu should be #menuSpy. Otherwise it will target the first link in list-example when it scrolls.

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

http://jsfiddle.net/o7tf53ce/

Updated with multiple menus: https://www.codeply.com/go/aMpKp07E0t

推荐阅读