samedi 3 avril 2021

Expand (collapse) a menu

There is a site with dropdown submenus (the side arrow points downwards - class arrow_01_B (expanded submenu) or has a direction to the right - arrow_01_R (collapsed submenu))

Expand menu

Here is the code for expanding\collapsing the menu

let elemsoffilteropengroup = document.querySelectorAll('.FilterDropdown__filter-open-group');

for (let i = 0; i < elemsoffilteropengroup.length; i++) {
  elemsoffilteropengroup[i].addEventListener('click', function(e) {
    if (e.target.childNodes[1].classList.contains('arrow_01_R')) {
      firstProperty = 'FilterDropdown__toggle-opened';
      secondProperty = 'arrow_01_B';
      lastProperty = 'IconFont_arrow_01_B';
      e.target.childNodes[1].classList.item(0) = firstProperty;
      e.target.childNodes[1].classList.item(1) = secondProperty;
      e.target.childNodes[1].classList.item(e.target.childNodes[1].classList.length - 1) = lastProperty;
    } else {
      firstProperty = 'FilterDropdown__toggle-closed';
      secondProperty = 'arrow_01_R';
      lastProperty = 'IconFont_arrow_01_R';
      e.target.childNodes[1].classList.item(0) = firstProperty;
      e.target.childNodes[1].classList.item(1) = secondProperty;
      e.target.childNodes[1].classList.item(e.target.childNodes[1].classList.length - 1) = lastProperty;
    }
  }, true);
}

Despite the presence of this code, the menu does not expand (collapse). Tell me how to expand\collapse the menu.




Aucun commentaire:

Enregistrer un commentaire