首页 文章

rebuild（）后删除事件监听器的fullpage.js

提问于
浏览 次
1

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

我正在启动fullpage插件

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的错误还是我的插件不正确？

jquery fullpage.js

1 回答

  • 0

    首先，请记住，您需要获得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();
});
    回复于

相关问题