fullpage.js轮播按钮：querySelectorAll+forEach仅首屏生效问题排查

嘿，我先帮你揪出代码里的坑，再给你靠谱的修复方案：

首先你写的JS里有个低级但致命的语法错误——你重复声明了同一个变量clickOnMe：先用const定义，紧接着又用let重新赋值。现代浏览器在严格模式下会直接报错，导致后续的事件绑定逻辑根本没完整执行，这大概率就是只有首屏按钮能工作的原因！

另外，结合fullpage.js的特性，它初始化时可能会对DOM做动态处理（比如克隆幻灯片），直接给初始DOM元素绑事件可能会漏掉后续生成的按钮，所以更稳妥的方式是用事件委托。

修复方案选一个就行： #

方案1：先修复变量声明（适合初始DOM就有所有按钮的场景）

把重复的变量声明删掉，只保留一次：

const clickOnMe = document.querySelectorAll(".course-button");
Array.from(clickOnMe).forEach(el => {
  el.addEventListener("click", e => {
    let showBox = e.currentTarget.nextElementSibling;
    showBox.classList.toggle("open-nav");
  });
});

方案2：用事件委托（适配fullpage的动态DOM）

事件委托靠事件冒泡，把事件绑在父容器上，不管fullpage怎么改DOM，按钮点击都能触发：

// 绑到你按钮的外层容器上，比如这个jumpbuttons-container
document.querySelector(".jumpbuttons-container").addEventListener("click", e => {
  // 确认点击的是目标按钮
  const targetButton = e.target.closest(".course-button");
  if (targetButton) {
    const showBox = targetButton.nextElementSibling;
    showBox.classList.toggle("open-nav");
  }
});

额外小建议 #

• 记得把事件绑定代码放在fullpage的初始化回调里，确保所有幻灯片都加载完再执行：

new fullpage('#fullpage', {
  // 你的其他配置...
  afterRender: function() {
    // 这里放事件绑定代码
  }
});

• 检查下CSS，确保.open-nav的display: block能正确覆盖.subnav-content的display: none

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