[решено] Не работает аккордеон с infinite scroll

Главные вкладки

Аватар пользователя guban guban 6 марта 2018 в 21:31

Всем привет. Установил модуль infinite scroll для вьюхи. В сайдбаре есть аккордеон, который по клику открывает дерево ссылок.

Проблема в том, что на страницах, где включена опция бесконечной прокрутки, этот аккордеон не работает. (вернее работает до того момента, как страница увеличится в длину)

Такое ощущение, что если высота страницы меняется из-за бесконечной прокрутки, то аккордеон не может работать.

вот js аккордеона:

 (function ($) {
 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);

Хотя странно, если высота страницы меняется самим аккордеоном, то он всеравно работает, может проблема не в этом?....

Лучший ответ

Аватар пользователя gun_dose gun_dose 7 марта 2018 в 6:48
2

При подгрузке контента инфинит скроллом срабатывает бихэйвор, и на аккордеон обработчик вешается дважды. А поскольку в нём вместо addClass используется toggle, то классы переключаются дважды, мгновенно возвращая аккордеон в исходное состояние.

Решение: использовать once(). Либо инициализировать аккордеон не в бихэйворе.

Комментарии

Аватар пользователя gun_dose gun_dose 7 марта 2018 в 6:48
2

При подгрузке контента инфинит скроллом срабатывает бихэйвор, и на аккордеон обработчик вешается дважды. А поскольку в нём вместо addClass используется toggle, то классы переключаются дважды, мгновенно возвращая аккордеон в исходное состояние.

Решение: использовать once(). Либо инициализировать аккордеон не в бихэйворе.

Аватар пользователя guban guban 7 марта 2018 в 17:18

Спасибо Большое! я уже отчаялся искать в чем проблема. Убрал бихэйвор и теперь работает как нужно. При подгрузке контента работает аккордеон. Спасибо!