我尝试在此网站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的错误还是我的插件错误?
答案 0 :(得分: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();
});