Всем привет. Установил модуль infinite scroll для вьюхи. В сайдбаре есть аккордеон, который по клику открывает дерево ссылок.
Проблема в том, что на страницах, где включена опция бесконечной прокрутки, этот аккордеон не работает. (вернее работает до того момента, как страница увеличится в длину)
Такое ощущение, что если высота страницы меняется из-за бесконечной прокрутки, то аккордеон не может работать.
вот js аккордеона:
Drupal.behaviors.accor = {
attach : function(context, settings) {
var d = document,
accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
setAria,
setAccordionAria,
switchAccordion,
touchSupported = ('ontouchstart' in window),
pointerSupported = ('pointerdown' in window);
skipClickDelay = function(e){
e.preventDefault();
e.target.click();
};
setAriaAttr = function(el, ariaType, newProperty){
el.setAttribute(ariaType, newProperty);
};
setAccordionAria = function(el1, el2, expanded){
switch(expanded) {
case "true":
setAriaAttr(el1, 'aria-expanded', 'true');
setAriaAttr(el2, 'aria-hidden', 'false');
break;
case "false":
setAriaAttr(el1, 'aria-expanded', 'false');
setAriaAttr(el2, 'aria-hidden', 'true');
break;
default:
break;
}
};
//function
switchAccordion = function(e) {
e.preventDefault();
var thisAnswer = e.target.parentNode.nextElementSibling;
var thisQuestion = e.target;
if(thisAnswer.classList.contains('is-collapsed')) {
setAccordionAria(thisQuestion, thisAnswer, 'true');
} else {
setAccordionAria(thisQuestion, thisAnswer, 'false');
}
thisQuestion.classList.toggle('is-collapsed');
thisQuestion.classList.toggle('is-expanded');
thisAnswer.classList.toggle('is-collapsed');
thisAnswer.classList.toggle('is-expanded');
thisAnswer.classList.toggle('animateIn');
};
for (var i=0,len=accordionToggles.length; i<len; i++) {
if(touchSupported) {
accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
}
if(pointerSupported){
accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
}
accordionToggles[i].addEventListener('click', switchAccordion, false);
}
}
};
})(jQuery);
Хотя странно, если высота страницы меняется самим аккордеоном, то он всеравно работает, может проблема не в этом?....
Комментарии
В вашем случае, хорошо бы ссылочку на сайт показать
локалхост пока
Ошибки в консоли js есть?
нет ошибок
При подгрузке контента инфинит скроллом срабатывает бихэйвор, и на аккордеон обработчик вешается дважды. А поскольку в нём вместо addClass используется toggle, то классы переключаются дважды, мгновенно возвращая аккордеон в исходное состояние.
Решение: использовать once(). Либо инициализировать аккордеон не в бихэйворе.
Спасибо Большое! я уже отчаялся искать в чем проблема. Убрал бихэйвор и теперь работает как нужно. При подгрузке контента работает аккордеон. Спасибо!