-3

Boa tarde. Estou alterando um bootstrap e já tem o menu lateral, e tem uma opção que do meu que tem o menu e submenu, mas eu preciso deixar ativo o menu clicado e seu submenu. Eu criei a função abaixo em JAvascript que limpa o clicado e deixa ativo o que acabou de clicar, mas, eu tenho no menu Movimentação e dentro do Movimentação tem Estoque e Pedido e quando eu clicar no submenu Pedido, deve ficar active o link de Pedido e tb de Movimentação e nao sei como mexer na minha função.Vou colocar parte do codigo apenas para nao ficar grande, mas apenas onde faz o menu lateral e a função JS que deixa active no link clicado. Obrigado

<nav class="mt-2">
    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
      <!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library -->

      <li class="nav-item">
        <a onclick="openPage('principal','conteudo')" href="#" class="nav-link active">
          <i class="nav-icon fas fa-th-large"></i>
          <p>
            Principal
          </p>
        </a>
      </li>

      <li class="nav-item">
        <a href="#" class="nav-link">
          <i class="nav-icon fas fa-edit"></i>
          <p>
            Cadastros
            <i class="fas fa-angle-left right"></i>
          </p>
        </a>
        <ul class="nav nav-treeview">
        <li class="nav-item">
            <a onclick="openPage('cadastro_centro_custos','conteudo')" href="#" class="nav-link">
              <i class="far fa-circle nav-icon"></i>
              <p>Centro de Custos</p>
            </a>
          </li>
          <li class="nav-item">
            <a onclick="openPage('cadastro_clientes','conteudo')" href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Clientes</p>
            </a>
          </li>
          <li class="nav-item">
            <a onclick="openPage('cadastro_fornecedores','conteudo')" href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Fornecedores</p>
            </a>
          </li>
          <li class="nav-item">
            <a onclick="openPage('cadastro_produtos','conteudo')" href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Produtos</p>
            </a>
          </li>
          <li class="nav-item">
            <a onclick="openPage('cadastro_usuarios','conteudo')" href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Usuários</p>
            </a>
          </li>
        </ul>
      </li>

      <li class="nav-item">
        <a href="#" class="nav-link  ">
          <i class="nav-icon fas fa-book"></i>
          <p>
            Financeiro
            <i class="fas fa-angle-left right"></i>
          </p>
        </a>
        <ul class="nav nav-treeview">
        <li class="nav-item">
            <a onclick="openPage('contas_pagar','conteudo')" href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Contas a Pagar</p>
            </a>
          </li>
          <li class="nav-item">
            <a onclick="openPage('contas_receber','conteudo')" href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Contas a Receber</p>
            </a>
          </li>
          <li class="nav-item">
            <a onclick="openPage('fluxo_caixa','conteudo')" href="#" class="nav-link ">
              <i class="far fa-circle nav-icon"></i>
              <p>Fluxo de Caixa</p>
            </a>
          </li>
        </ul>
      </li>

      <li class="nav-item">
        <a href="#" class="nav-link ">
          <i class="nav-icon fas fa-table"></i>
          <p>
            Movimentação
            <i class="fas fa-angle-left right"></i>
          </p>
        </a>
        <ul class="nav nav-treeview">
        <li class="nav-item">
            <a onclick="openPage('mov_estoque','conteudo')" href="#" class="nav-link">
              <i class="far fa-circle nav-icon"></i>
              <p>Estoque</p>
            </a>
          </li>
          <li class="nav-item">
            <a onclick="openPage('mov_pedidos','conteudo')" href="#" class="nav-link">
              <i class="far fa-circle nav-icon"></i>
              <p>Pedidos</p>
            </a>
          </li>
        </ul>
      </li>

      <li class="nav-item">
        <a onclick="openPage('relatorio','conteudo')" href="#" class="nav-link">
          <i class="nav-icon fas fa-copy"></i>
          <p>
            Relatórios
          </p>
        </a>
      </li>

      <li class="nav-item">
        <a onclick="openPage('mudar_senha','conteudo')" href="#" class="nav-link">
          <i class="nav-icon fas fa-key"></i>
          <p>
            Mudar a Senha
          </p>
        </a>
      </li>

      <li class="nav-item">
        <a href="?sair" class="nav-link">
          <i class="nav-icon fas fa-sign-out-alt"></i>
          <p>
            Sair do Sistema
          </p>
        </a>
      </li>    

    </ul>

    <script>
        var navItems = document.querySelectorAll(".nav-link");

        for (var i = 0; i < navItems.length; i++) {            

          navItems[i].addEventListener("click", function() {

              clearActiveMenu();
              
              this.classList.add("active");
          });
        }

        function clearActiveMenu(){
          //nav nav-treeview
          navItems.forEach(li =>{
            li.classList.remove("active");              
          })

        }
    </script>

  </nav>

1 Resposta 1

-1

Podes verificar se o elemento pai é um submenu. Se for, adicionar a classe "active" no elemento anterior ao submenu.

        for (var i = 0; i < navItems.length; i++) {            

          navItems[i].addEventListener("click", function() {

              clearActiveMenu();

              this.classList.add("active");

              var parent = this.parentElement.parentElement;
              if (parent.classList.contains("nav-treeview")) {
                parent.previousElementSibling.classList.add("active");
              }
          });
        }
1
  • 1
    Cara, muito obrigado mesmo. Matou a pau... Era isso que eu precisava. Muito obrigado. Abraços Commented 28/09/2023 às 12:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .