2

Este é meu primeiro post e tenho uma dúvida. Estou trabalhando num dropdown menu que atua baseado no clique do usuário. Dessa forma, ao clicar em um dos itens do menu, ele desce apresentando mais informações, e ao clicar novamente ele é fechado (os códigos estão no final do post).


1: O primeiro problema é que eu quero que o menu seja encerrado ao clicar em qualquer local da página, e não somente clicando novamente no botão do menu. Então queria alguma função que capturasse o clique do mouse na página. Não sei se essa é a melhor solução, caso não seja, me informem de que forma eu posso fazê-lo.

2: O outro problema seria o fato de que o dropdown menu que está inserido no primeiro item do menu e só funciona após o primeiro clique, ou seja, só os cliques subsequentes fazem com que ele feche e abra o menu corretamente. O que pensei foi que o JavaScript com a variável que captura as informações não está atualizando até o momento do primeiro clique, dessa forma ele só funciona a partir do segundo. Eu não sei se estou certo, procurei por uma forma de executar o código somente quando tudo estivesse carregado, cheguei até a função document.onload(), mas para mim não funcionou a função. Não sei se cometi algum erro ou se não era essa a solução. Enfim, essas são minhas duas dúvidas. Agradecerei muito se alguém puder ajudar, vai engradecer muito meu aprendizado.

var elem = document.getElementsByClassName('sub-menu');

function fclick(){
  if(elem[0].style.display == "none"){
      elem[0].style.display = "block";
  }else{
      elem[0].style.display = "none";
  }
}
*{color: #fff; margin: 0; padding: 0;}
body{background-color: #f5f5f5;}
a{text-decoration: none;}
li{list-style: none;}

#navbar{
  background-color: #2C353B;
  height: 3em;
}
.menu{
  display: block;
}

.menu li{
  float: left;
  padding: 13px 10px;
}

.sub-menu{
  position: absolute;
  display: none;
  top: 47px;
  left: 0;
}

.sub-menu li{
  float: none;
  padding: 13px 10px;
  background-color: #2C353B;
}
<!DOCTYPE html>
<html lang="pt-BR" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>clickable-menu</title>
  </head>
  <body>
    <nav id="navbar">
      <ul class="menu">
      <li>
        <a href="#" onclick="fclick()">Some-item</a>
        <ul class="sub-menu">
          <li><a href="#">Some-item</a></li>
          <li><a href="#">Some-item</a></li>
          <li><a href="#">Some-item</a></li>
        </ul>
      </li>
      <li><a href="#">Some-item</a></li>
      <li><a href="#">Some-item</a></li>
      </ul>
    </nav>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

1 Resposta 1

1

Ao setar display: none no CSS, não significa que o elemento possui essa propriedade no JavaScript. O CSS não altera as propriedades do elemento, ele apenas muda ou define o comportamento visual. Por isso, ao primeiro clique, o if assume o else e altera a propriedade style.display para none; no segundo clique, aí sim vai estar com none e começa a funcionar.

Como o elemento começa com a propriedade style.display vazia, basta inserir mais uma condição no if verificando se, além de ser none, o display é vazio:

if(elem[0].style.display == "none" || !elem[0].style.display){

Para fechar o submenu ao clicar em qualquer local da página, basta criar um event handler para o objeto document, que é o documento todo:

document.onclick = function(){

   elem[0].style.display = "none";

}

Mas é preciso também cancelar o bubbling ao clicar no item do menu que abre o submenu, pois ele também faz parte do document. Para isso é preciso passar o evento ao chamar a função no onclick e usar event.stopPropagation();. Inclua o termo event como argumento da função:

onclick="fclick(event)"

E na função você usa:

function fclick(event){

   event.stopPropagation();
   // resto do código
}

Irá ficar tudo assim:

var elem = document.getElementsByClassName('sub-menu');

function fclick(event){

   event.stopPropagation();

   if(elem[0].style.display == "none" || !elem[0].style.display){
      elem[0].style.display = "block";
   }else{
      elem[0].style.display = "none";
   }
}

document.onclick = function(){
   
   elem[0].style.display = "none";
   
}
*{color: #fff; margin: 0; padding: 0;}
body{background-color: #f5f5f5;}
a{text-decoration: none;}
li{list-style: none;}

#navbar{
  background-color: #2C353B;
  height: 3em;
}
.menu{
  display: block;
}

.menu li{
  float: left;
  padding: 13px 10px;
}

.sub-menu{
  position: absolute;
  display: none;
  top: 47px;
  left: 0;
}

.sub-menu li{
  float: none;
  padding: 13px 10px;
  background-color: #2C353B;
}
<nav id="navbar">
<ul class="menu">
<li>
  <a href="#" onclick="fclick(event)">Some-item</a>
  <ul class="sub-menu">
    <li><a href="#">Some-item</a></li>
    <li><a href="#">Some-item</a></li>
    <li><a href="#">Some-item</a></li>
  </ul>
</li>
<li><a href="#">Some-item</a></li>
<li><a href="#">Some-item</a></li>
</ul>
</nav>

2
  • Muito bom, consegui entender, então mesmo que eu possa manipular o css pelo javascript, não significa que ele já possui a característica que eu estou alterando por padrão alterada, preciso sinalizar isso no código, muito legal, não conhecia esses detalhes, sua resposta foi muito conclusiva, vou aproveitar e estudar sobre esses detalhes que mencionou principalmente sobre a função stopPropagation() que eu não conhecia, muito agradecido agora consigo voltar a editar e melhorar meu código. 22/01/2019 às 4:41
  • Legal! Mas é o contrário: o CSS não pode alterar propriedades dos elementos, o JavaScript pode.
    – Meu ovo
    22/01/2019 às 4:44

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 .