将导航绑定到全屏幻灯片

Question

我正在使用fullpage.js生成一个全屏滑动网站。

我有四个sections，四个导航点作为插件生成的li。第一个li a连接到first section，第二个li a连接到second section，等等。

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

点击section3被删除。现在我的部分比导航点少了。

section1    li a
section2    li a
section4    li a
            li a

出于某种原因，我需要第四个li a仍然能够链接到section4。

虽然我想触发一个功能restoreSection3()当有人点击third li a

有人能帮我一下吗?您可以查看jsfiddle示例以更好地理解。尝试删除section3并使用右侧的导航。

Answer 1

一种可能的解决方案是，通过切换display来删除幻灯片，通过将height设置为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);
}

您可以看到该代码在此JSFiddle上工作的演示:http://jsfiddle.net/97tbk/616/

现在当你点击第四个链接时，它会转到第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);
}

您可以看到它在另一个JSFiddle上工作:http://jsfiddle.net/97tbk/618/

现在一切工作如预期的，当你点击左边的导航，虽然它仍然可能看起来有点时髦当你使用鼠标滚轮:作为第3节将不启用，当第三和第四个链接是活跃的，第4节将显示。这种情况下的预期行为是什么?

不是想质疑你这样做的原因，但从可用性的角度来看，删除第三部分和第三个导航链接可能会更好，因为如果用户在滚动时看到4个导航链接但只有3个部分，他们可能会感到困惑。