Question

我将应用程序更新为使用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>

感谢您的帮助！

谢谢。

Answer 1

滚动目标菜单应为<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Dealer Tab</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" /> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script> <script type="test/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.0/papaparse.min.js"></script> <link rel="stylesheet" href='cnh_dealer_tab.css'> </head> <body> <div class="form-style"> <h3>Find Dealer:</h3> <form id="dealerSearchForm" method="POST" action="cnh_dealer_tab.html"> Brand: <select name="Brand" id="brand" required> <option value="NHAG">NHAG</option> <option value="NHCE">NHCE</option> <option value="CSCE">CSCE</option> <option value="CSAG">CSAG</option> </select> <div id="goRight"> SAP Code: <input type="text" id="sapCode" name="SAPCode" required> </div> <br> <br> Dealer: <input type="text" id="dealer" value="" readonly> <br> <br> <button id="submitButton">Submit</button> <input type="reset" name="reset"> <button id="goToCountyTab">Go to County Tab</button> <button id="exportToExcel">Export to Excel</button> </form> </div> <div id="jsGrid" class="form-style"> <span class="grid"> <script type="text/javascript" src='cnh_grid_data'></script> <script type="text/javascript" src='cnh_ssm_assignments'></script> </span> </div> </body> </html>。否则，它将在滚动时定位列表示例中的第一个链接。

#menuSpy

http://jsfiddle.net/o7tf53ce/

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

Bootstrap4和列表组可折叠的滚动问题

1 个答案: