0

Estou tentando fazer um menu dropdown só alterando as <div's> com Js.
Tem alguma maneira para usar apenas uma function() para alterar as <div's>?
A única solução que encontrei é criar uma function() para cada <div> que desejo esconder/reexibir mas ficaria muito extenso o código.
O que consegui até agora é esconder e reexibir uma única <div>. Segue:

JavaScript:

    function startmenu(){
            ex1.style.display = "none";
            }

    function abrefecha(){
            if(ex1.style.display == "none")
            {
                ex1.style.display = "block";
            }
            else
            {
                startmenu();
            } 
        }

HTML:

    <body>
    <h1>Exercícios JavaScript</h1>

    <a href="javaScript:abrefecha()"><h2> Exercício 1 </h2></a>
    <div id="ex1" style="display: none;">   
    </div>

    <a href="javaScript:abrefecha()"><h2> Exercício 2 </h2></a>
    <div id="ex2" style="display: none;">
    </div>      

    <a href="javaScript:abrefecha()"><h2> Exercício 3 </h2></a>
    <div id="ex3" style="display: none;">
    </div>
    ...

2 Respostas 2

1

O if que tem não está completo e ao invés do no else chamar startMenu() deveria aplicar o style inverso, que é o none:

ex1.style.display = "none";

Pode ainda generalizar a lógica para qualquer elemento, passando a receber esse elemento a função abrefecha:

function abrefecha(elemento/*<--agora recebe o id do elemento a mostrar/esconder*/) {
  let ex = document.getElementById(elemento); //buscar elemento ao html com base no id

  if (ex.style.display == "none") {
    ex.style.display = "block";
  } else {
    ex.style.display = "none"; //agora no else volta a aplicar none
  }
}
<h1>Exercícios JavaScript</h1>

<a href="javascript:abrefecha('ex1')"><!--Agora passa o div a mostrar/esconder-->
  <h2> Exercício 1 </h2>
</a>
<div id="ex1" style="display: none;">Div1</div> <!--Coloquei conteudo nos divs-->

<a href="javascript:abrefecha('ex2')"><!--Agora passa o div a mostrar/esconder-->
  <h2> Exercício 2 </h2>
</a>
<div id="ex2" style="display: none;">Div2</div>

<a href="javascript:abrefecha('ex3')"><!--Agora passa o div a mostrar/esconder-->
  <h2> Exercício 3 </h2>
</a>
<div id="ex3" style="display: none;">Div3</div>

Pode ainda simplificar a função abrefecha com um operador ternário fazendo:

function abrefecha(elemento) {
  let ex = document.getElementById(elemento);
  ex.style.display = ex.style.display=="none" ?"block":"none";
}
0

Experimenta:

$(document).ready(function() {
    $('#menu-icon').click(function() {
        $('.nav-menu ul').toggleClass('visible');
    });
});

<!-- my code -->
<div class="header-nav">
  <nav class="nav-menu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li> 
    </ul>
  </nav>

  <a href="#" id="menu-icon"></a>
</div>

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 .