Question

我尝试在此网站https://frontendsite.bitbucket.io/#twoPage上使用fullpage.js。 #twoPage部分中有可折叠的内容。

我正在初始化整页插件

var myFullpage;
function initFullPage() {
myFullpage = new fullpage('#fullpage',{

 navigation: true,
    navigationPosition: 'right',
    scrollOverflow: true,
    scrollOverflowOptions: {click: false},
      scrollOverflowReset: true,
      afterLoad: function(anchorLink, index){
      var loadedSection = $(this);
      var nextSection = loadedSection.next();
      var prevSection = loadedSection.prev();
      if(nextSection.hasClass('fp-auto-height') ) {
        var IScroll = nextSection.find('.fp-scrollable').data('iscrollInstance');
        IScroll.scrollTo(0, 0, 0)
      }
      if(prevSection.hasClass('fp-auto-height') ) {
        var IScroll = prevSection.find('.fp-scrollable').data('iscrollInstance');
        IScroll.scrollTo(0, IScroll.maxScrollY, 0)
      }
  },
    anchors: ['firstPage', 'twoPage', '3rdPage', 'foursPage'],

 });

}

我添加单击侦听器的目的是通过jQuery显示/隐藏可折叠内容

$('.plus_icon.question').click(function( ){
      var a = $(this).siblings('.answer');
      a.toggleClass('open');
      $(this).toggleClass('rotate');
      myFullpage.reBuild();
    });

但是在显示/隐藏带有“ .answer”的可折叠内容之后，单击回调不起作用，但是如果我用myFullPage.reBuild（）注释行，则该回调有效。是fullpage.js的错误还是我的插件错误？

Answer 1

首先，请记住，为了合法使用它，您需要获得fullPage.js许可证。

第二。您可以使用afterRebuild回调：

new fullpage('#fullpage',{
    afterRender: function(){
         bindMyEvents();
    },
    afterReBuild: function(){
        bindMyEvents();
    }
});

function bindMyEvents(){
    $('.plus_icon.question').click(function( ){
      var a = $(this).siblings('.answer');
      a.toggleClass('open');
      $(this).toggleClass('rotate');
      myFullpage.reBuild();
    });
}

或者，更容易使用jquery事件委托：

new fullpage('#fullpage',{OPTIONS HERE});

$(document).on('click, '.plus_icon.question', function( ){
  var a = $(this).siblings('.answer');
  a.toggleClass('open');
  $(this).toggleClass('rotate');
  myFullpage.reBuild();
});

fullpage.js在reBuild（）之后删除事件侦听器

1 个答案: