javascript - 包含使用 fullpage.js 脚本的子部分的页面

Question

我用 fullpage.js 脚本创建了多个页面，它是一个很好用的插件。我有一个场景，其中一个页面有多个子部分，我希望 anchor 导航链接到相关页面，如果页面有多个子部分，那么它应该滚动浏览这些部分，依此类推。

为了简化，我设置了示例 http://codepen.io/anon/pen/EgXbWj

在这个例子中，当我点击第一部分导航时，它会转到第一部分..如果我点击第二部分，它会转到第二部分...

现在，如果我点击第三部分导航，它会带我到 Section Two sub page one 部分，而我希望它转到 Section Three 即

我怎样才能让它在这种情况下工作。

<div id="fullpage">
    <div class="section">Section One</div>
    <div class="section">Section Two</div>
         <div class="section">Section Two sub page one</div>
         <div class="section">Section Two sub page two</div>
    <div class="section">Section Three</div>
    <div class="section">Section Four</div>
</div>

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#page1">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#page2">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#page3">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#page4">Fourth section</a></li>
</ul>



$('#fullpage').fullpage({
  anchors: ['page1', 'page2', 'page3', 'page4'],
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  menu: '#myMenu'
});

Answer 1

管理使其工作。工作代码。 http://codepen.io/anon/pen/JRJOkb

<div id="fullpage">
    <div class="section" data-anchor="one">Section One</div>
    <div class="section" data-anchor="two">Section Two</div>
         <div class="section">Section Two sub page one</div>
         <div class="section">Section Two sub page two</div>
    <div class="section" data-anchor="three">Section Three</div>
    <div class="section" data-anchor="four">Section Four</div>
</div>

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#one">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#two">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#three">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#four">Fourth section</a></li>
</ul>

$('#fullpage').fullpage({
  anchors: ['one', 'two', 'a1','a2','three', 'four'],
  sectionsColor: ['yellow', 'orange',  'orange', 'orange','#C0C0C0', '#ADD8E6'],
  menu: '#myMenu'
});