如何用Bootstrap Scrollspy在顶部下拉导航显示当前章节名称？

我看了你的代码，这个需求其实可以通过监听Scrollspy的激活事件来实现，具体步骤如下：

1. 给下拉按钮添加ID并设置初始文本 #

首先把原来固定显示“section”的下拉按钮，改成带ID的元素，同时设置初始文本为“章节1”：

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownSectionTitle" data-bs-toggle="dropdown" aria-expanded="false">
  章节1
</button>

2. 监听Scrollspy激活事件，动态更新按钮文本 #

在你的JavaScript代码中添加这段逻辑，监听Scrollspy的激活事件，获取当前激活章节的名称并替换按钮文本：

$('body').on('activate.bs.scrollspy', function () {
  // 找到当前激活的下拉菜单项，获取它的文本内容
  const activeSectionText = $('.dropdown-item.active').text();
  // 更新下拉按钮的显示文本
  $('#dropdownSectionTitle').text(activeSectionText);
});

3. 验证配置一致性 #

确保你的每个章节ID和下拉菜单项的href对应一致（比如章节1的ID是section1，下拉项的href是#section1），这部分你的代码已经正确配置了，不用额外修改。

这样修改后，当你滚动到对应章节时，下拉导航收起状态下的按钮就会自动显示当前章节的名称，初始状态显示“章节1”，完全符合你的需求~

内容的提问来源于stack exchange，提问作者AlyssaAlex