Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Há alguma forma mais viável para fazer um tuggle de vários botões ?

let cadastro = document.querySelector('#divcadastro');
let btnCadastro = document.querySelector('#btnCadastro');

let financeiro = document.querySelector('#divfinanceiro');
let btnFinanceiro = document.querySelector('#btnFinanceiro');

let usuario = document.querySelector('#divusuario');

let btnUsuario = document.querySelector('#btnUsers');

btnCadastro.addEventListener('click', function(){
    cadastro.classList.toggle('toggle-menu');
});

btnFinanceiro.addEventListener('click', function(){
    financeiro.classList.toggle('toggle-menu');
});

btnUsuario.addEventListener('click', function(){
    usuario.classList.toggle('toggle-menu');
});
<nav class="navbar">
        <a href="#"><img src="img/Logo_Tropus.png" alt="logo da empresa Tropus" class="logo"></a>
        <ul>
            <li class="main-li"><a href="#" class="main-item" id="btnCadastro">Cadastros</a></li>
            <div id = "divcadastro" class="internal-itens">
                <ul>
                    <li class="internal-list-item"><a href="#">Franquias</a></li>
                    <li class="internal-list-item"><a href="#">Cartas</a></li>
                    <li class="internal-list-item"><a href="#">Contas Bancárias</a></li>
                </ul>
            </div>
            <li class="main-li"><a href="#" class="main-item" id="btnFinanceiro">Financeiro</a></li>
            <div id = "divfinanceiro" class="internal-itens">
                <ul>
                    <li class="internal-list-item"><a href="#">Pagar</a></li>
                    <li class="internal-list-item"><a href="#">Receber</a></li>
                    <li class="internal-list-item"><a href="#">Gerar Parcelas</a></li>
                </ul>
            </div>
            <li class="main-li"><a href="#" class="main-item" id="btnUsers">Usuários</a></li>
            <div id = "divusuario" class="internal-itens">
                <ul>
                    <li class="internal-list-item"><a href="#">Incluir</a></li>
                    <li class="internal-list-item"><a href="#">Alterar</a></li>
                    <li class="internal-list-item"><a href="#">Manutenção</a></li>
                </ul>
            </div>
            <li class="main-li"><a href="#" class="main-item">Segurança</a></li>
        </ul>
    </nav>  
1 resposta
solução!

Guilherme, boa tarde!

Você pode ao invés de selecionar cada um dele pode usar o querySelectorAll('.btn') a colocar uma classe .btn assim ele irá retornar uma lista de botões. Após ter essa array será necessário iterar sobre essa lista e adicionar o eventListener.

Eu vou deixar um exemplo que eu acabei de fazer para você compreender melhor:

https://codepen.io/devcapu-the-looper/pen/KjJoLO

Além disso você pode ver o conceito de Event Delegation, que pode te ajudar a chegar na mesma solução porém com outro meio de resolver.

Espero ter ajudado e bons estudos!