Javascript 将导航绑定到全屏幻灯片

我正在使用生成一个全屏滑动网站

我有四个

部分

，其中四个导航点是由插件生成的

li

。第一个

li a

链接到

第一节

，第二个

li a

链接到

第二节

，等等

section1    li a
section2    li a
section3    li a 
section4    li a

单击

部分3

将被删除。现在我的部分比导航点少

section1    li a
section2    li a
section4    li a
            li a

出于某种原因，我需要第四个

li a

仍然能够链接到

第4节

尽管我想在有人单击第三个li时启动函数

restoreSection3（）

---

有人能帮我吗？您可以查看，以便更好地理解。尝试删除

部分3

，并使用右侧的导航

一种可能的解决方案是，不通过切换幻灯片的

显示来移除幻灯片，而是通过将其
高度设置为0来移除幻灯片，并隐藏其内容溢出

像这样：

function removeSection3() {
    // hide it by setting a height of 0, hiding overflow, and setting display to `block`
    $("#f03").css({ display:"block", height:0, overflow:"hidden"});
    silentScroll($('.fp-section.active').position().top);
}

function restoreSection3() {
    // resetting the display to `table` will make the overflow visible again
    $("#f03").css({ display:"table"});
    silentScroll($('.fp-section.active').position().top);
}

您可以看到该代码在这个JSFIDLE上的演示：

现在，当你点击第4个链接时，它会转到第4节。在下方，当你点击第三个链接时，它也会转到第4节。因此，让我们通过添加一个事件侦听器来完成请求，该侦听器将在单击第三个
li a
时触发
restoreSection3（）
：

$("#fp-nav li:nth-child(3) a").on("click", function() {
    // we restore section 3 by simulating clicking on the "Restore Section 3" button
    $('button#first').click();
});

因此，最终代码将如下所示：

function removeSection3() {

    // hide it by setting a height of 0 and hiding the overflow
    $("#f03").css({ display:"block", height:0, overflow:"hidden"});

    // add an event listener, so when the third link is clicked, section 3 will be restored
    $("#fp-nav li:nth-child(3) a").on("click", function() {
        // we restore by simulating clicking on the "Restore Section 3" button
        $('button#first').click();
    });

    silentScroll($('.fp-section.active').position().top);
}

function restoreSection3() {
    // reset the display to table will make the overflow visible again
    $("#f03").css({ display:"table"});
    silentScroll($('.fp-section.active').position().top);
}

您可以看到它在另一个JSFIDLE上工作：

现在，当你点击左边的导航时，一切都如预期的那样工作，尽管当你使用鼠标滚轮时，它看起来仍然有点古怪：因为第3节将不会被启用，当第三和第四节链接处于活动状态时，第4节将被显示。这种情况下的预期行为是什么

不要试图质疑你这样做的原因，但就可用性而言，最好删除第三部分和第三个导航链接，因为如果用户在滚动时看到4个导航链接，但只有3个部分，那么用户可能会感到困惑。
Hey@alvaro，这是一个很好的答案！非常感谢你的努力。我对一个解决方案越是兴奋，我就越感激你花时间解释它，就像你所做的那样。我完全能够“重现”您的流程。唯一不同的是，在触摸设备（如ipad）上，第三个按钮仍然可以导航到第四部分。这完全是有线的，我不知道为什么。如果你有任何建议，我非常感谢！在我看来，fullpage.js中的另一个脚本似乎覆盖了您的命令。@MarianRick也许您可以将事件绑定到
单击
和
触摸启动
事件，如下所示：
$（“#fp nav li:nth child（3）a”）。on（“单击触摸启动”，function（）{…}）
。试试看，让我知道进展如何