[RESOLVIDO] Menu Responsivo - Fechar menus abertos ao clicar em outra opção

Menu / Menu Árvore
#1

Estou começando a utilizar o novo menu responsivo e surgiu uma necessidade. Clico em um item do menu e abre as opções do submenu, dai se clico em outro item, abre também as opções do submenu, mas ficam todas as opções dos itens clicados abertas, se clico em uma terceira opção fica tudo aberto. Polui bastante o menu. Existe alguma forma de ao clicar em uma opção de item de menu e tiver outra aberta fechar a mesma, desta forma sempre vai estar aberto o item que clicamos por ultimo, que teoricamente será o item ativo. (Isto é basico de qualquer sistema de opção tipo acordeon, clicou em uma opção fecha a outra). Algém sabe se tem essa opção nativa no scriptcase?

Obrigado.

#2

Resolvi. Graças a inteligencia artificial (gemini). A quem interessar. Coloquei este script no evento onload do menu. (obs: meu menu cria as opções dinamicamente)

?>

inicio do script javascript

document.addEventListener(‘DOMContentLoaded’, function() {
setTimeout(function() {
try {
function setupMenuListeners() {
const menuLinks = document.querySelectorAll(’.ae-menubar-accordion [role=“menuitem”][aria-haspopup=“true”]’);

    if (menuLinks.length === 0) {
      console.warn('Nenhum item de menu com submenu encontrado com o seletor CSS.');
      return;
    }

    menuLinks.forEach(link => {
      // Remove o ouvinte anterior (se existir) para evitar duplicações
      link.removeEventListener('click', menuClickHandler);

      // Adiciona o novo ouvinte
      link.addEventListener('click', menuClickHandler);
    });
  }

  function menuClickHandler(event) {
    event.preventDefault();
    event.stopPropagation();

    // Fecha outros menus abertos
    const allOpenMenus = document.querySelectorAll('.ae-menubar-accordion [role="menuitem"][aria-haspopup="true"][aria-expanded="true"]');
    allOpenMenus.forEach(otherMenu => {
      if (otherMenu !== this) {
        otherMenu.setAttribute('aria-expanded', 'false');
        const submenu = otherMenu.nextElementSibling;
        if (submenu && submenu.classList.contains('wrapper')) {
          submenu.style.height = '0px';
        }
      }
    });

    const self = this; // Salva o 'this' em uma variável
    setTimeout(function() { // Adiciona um pequeno atraso

      // Corrige a lógica aqui:
      const isExpanded = self.getAttribute('aria-expanded') === 'true';
      self.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');

      const submenu = self.nextElementSibling;

      if (submenu && submenu.classList.contains('wrapper')) {
          if (!isExpanded) {
              submenu.style.height = '100%'; //ou 'auto'
          } else {
              submenu.style.height = '0px';
          }
      }
    }, 50); // Atraso de 50 milissegundos

    const linkText = this.textContent.trim();
  }

  // Inicializa os listeners
  setupMenuListeners();

  console.log('Script de menu expandir/colapsar carregado com sucesso.');

} catch (error) {
  console.error('Ocorreu um erro no script de menu:', error);
}

}, 2000);
});

Fim do script

<?php