0

Não consigo fazer com que quando um menu for aberto o outro fechar. Tentei o seguinte código:

const itemLinks = document.querySelectorAll('.header-item')
const menus = document.querySelectorAll('.nav-menu')

for(let i = 0; i < itemLinks.length; i++){
	itemLinks[i].addEventListener('click',mostrarMenu)
}

function mostrarMenu(e){
	console.log(menus)
	for(let i = 0; i < menus.length; i++){

	}
}
<a href="#one" class="header-item header-item--one">menu one</a>
<a href="#two" class="header-item header-item--two">menu two</a>

<nav class="nav-menu">
    <ul>
        <li>Item Um</li>
        <li>Item Dois</li>
        <li>Item Três</li>
    </ul>
</nav>

<nav class="nav-menu">
    <ul>
        <li>Item Um</li>
        <li>Item Dois</li>
        <li>Item Três</li>
    </ul>
</nav>

3
  • 1
    Poderia elaborar um Exemplo Mínimo, Completo e Verificável demonstrando o problema? Seu código parece estar incompleto e bastante confuso quanto ao que deseja fazer.
    – Woss
    Commented 8/01/2019 às 14:29
  • bom dia anderson o código realmente estava confuso hehe, tinha modificado o html e esquecir de editar o js.. mais assim..ele continua incompleto n consigo prosseguir ja tentei mais só consigo fazer com que clicando em um link abra o menu e apos clicar em outro ele abre ao mesmo tempo. oque eu quero fazer é que quando clicado no outro ele feche,se vc puder me ajudar lhe agradeço abraço. Commented 8/01/2019 às 14:40
  • Já tentou utilizar jQuery? Ele disponibiliza esse tipo de funcionalidade pré pronta. Dá uma olhada nesse seite w3schools.com/jquery
    – Luke
    Commented 8/01/2019 às 14:58

1 Resposta 1

1

Tentando seguir um pouco a arquitetura do bootstrap + jQuery, daria para fazer da seguinte forma:

var headerItems = document.getElementsByClassName("header-item");

for (var headerItem of headerItems) {
    headerItem.onclick = function(ev) {
        var refItem = document.getElementById(ev.target.getAttribute("data-toggle"));
        var navItems = document.getElementsByClassName("nav-menu");

        for (var navItem of navItems) {
            navItem.classList.add("hidden");
        }
        refItem.classList.remove("hidden");
    }
}
.hidden {
    display: none
}
<a href="#one" data-toggle="item-1" class="header-item header-item--one">menu one</a>
<a href="#two" data-toggle="item-2" class="header-item header-item--two">menu two</a>

<nav id="item-1" class="nav-menu hidden">
    <ul>
        <li>Item Um1</li>
        <li>Item Dois1</li>
        <li>Item Três1</li>
    </ul>
</nav>

<nav id="item-2" class="nav-menu hidden">
    <ul>
        <li>Item Um2</li>
        <li>Item Dois2</li>
        <li>Item Três2</li>
    </ul>
</nav>

O que acontece é que, no evento de click nos headers, ele remove a classe hidden de todos os elementos nav-menu e depois adiciona somente no que está dentro do data-toggle.

0

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