Dropdown com cliqueCSS: Problema no Firefox e Chrome utilizando paddingComo deixar imagem responsivaAjustar...

Dropdown com clique

CSS: Problema no Firefox e Chrome utilizando paddingComo deixar imagem responsivaAjustar cor do texto no submenuComo aumentar select com css proporcionalmenteDeixar opções no tamanho do total do menuAlinhar texto horizontalmente em relação a imagemComo centralizar opções de menu no bootstrap 3Centralizar menu na páginaComo deixar opção marcada ao clicar em divMudar cor do menu por css

Criei um HTML e CSS de um menu porém não consigo criar o Dropdown com clique, apenas quando passa o mouse o menu recolhe ou expande e eu gostaria de fazer com um clique. Agradeço desde já a ajuda.

*{ margin: 0; paddin: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666;}

#nav li a {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555;}

#nav li a:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul{display: none;}

#nav li:hover ul { display: block; cursor:pointer;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

<ul id="nav"> 

  <li><a href="#">Consultores</a>

    <ul>

      <li><a href="#">sub - 1</a></li>

      <li><a href="#">sub - 2</a></li>

      <li><a href="#">sub - 3</a></li>

    </ul>

  </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>

</ul>

editada 4 horas atrás

Sam

53,9mil113771

perguntada 6 horas atrás

Victor R

161

New contributor

Está bem difícil de entender. Você consegue editar a pergunta e colocar o seu CSS como código? Adiciona o HTML também.

– DaviAragao
6 horas atrás

comentar |

*{ margin: 0; paddin: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666;}

#nav li a {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555;}

#nav li a:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul{display: none;}

#nav li:hover ul { display: block; cursor:pointer;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

<ul id="nav"> 

  <li><a href="#">Consultores</a>

    <ul>

      <li><a href="#">sub - 1</a></li>

      <li><a href="#">sub - 2</a></li>

      <li><a href="#">sub - 3</a></li>

    </ul>

  </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>

</ul>

editada 4 horas atrás

Sam

53,9mil113771

perguntada 6 horas atrás

Victor R

161

New contributor

Está bem difícil de entender. Você consegue editar a pergunta e colocar o seu CSS como código? Adiciona o HTML também.

– DaviAragao
6 horas atrás

comentar |

*{ margin: 0; paddin: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666;}

#nav li a {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555;}

#nav li a:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul{display: none;}

#nav li:hover ul { display: block; cursor:pointer;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

<ul id="nav"> 

  <li><a href="#">Consultores</a>

    <ul>

      <li><a href="#">sub - 1</a></li>

      <li><a href="#">sub - 2</a></li>

      <li><a href="#">sub - 3</a></li>

    </ul>

  </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>

</ul>

editada 4 horas atrás

Sam

53,9mil113771

perguntada 6 horas atrás

Victor R

161

New contributor

*{ margin: 0; paddin: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666;}

#nav li a {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555;}

#nav li a:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul{display: none;}

#nav li:hover ul { display: block; cursor:pointer;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

<ul id="nav"> 

  <li><a href="#">Consultores</a>

    <ul>

      <li><a href="#">sub - 1</a></li>

      <li><a href="#">sub - 2</a></li>

      <li><a href="#">sub - 3</a></li>

    </ul>

  </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>

</ul>

*{ margin: 0; paddin: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666;}

#nav li a {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555;}

#nav li a:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul{display: none;}

#nav li:hover ul { display: block; cursor:pointer;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

<ul id="nav"> 

  <li><a href="#">Consultores</a>

    <ul>

      <li><a href="#">sub - 1</a></li>

      <li><a href="#">sub - 2</a></li>

      <li><a href="#">sub - 3</a></li>

    </ul>

  </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>

</ul>

*{ margin: 0; paddin: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666;}

#nav li a {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555;}

#nav li a:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul{display: none;}

#nav li:hover ul { display: block; cursor:pointer;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

<ul id="nav"> 

  <li><a href="#">Consultores</a>

    <ul>

      <li><a href="#">sub - 1</a></li>

      <li><a href="#">sub - 2</a></li>

      <li><a href="#">sub - 3</a></li>

    </ul>

  </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>

</ul>

html css

editada 4 horas atrás

Sam

53,9mil113771

perguntada 6 horas atrás

Victor R

161

New contributor

editada 4 horas atrás

Sam

53,9mil113771

perguntada 6 horas atrás

Victor R

161

New contributor

editada 4 horas atrás

Sam

53,9mil113771

editada 4 horas atrás

Sam

53,9mil113771

editada 4 horas atrás

Sam

53,9mil113771

perguntada 6 horas atrás

Victor R

161

New contributor

perguntada 6 horas atrás

Victor R

161

perguntada 6 horas atrás

Victor R

161

New contributor

Victor R é começou a colaborar agora com este site. Seja gentil ao pedir esclarecimentos, comentar, e responder.
Consulte nosso Código de Conduta.

Está bem difícil de entender. Você consegue editar a pergunta e colocar o seu CSS como código? Adiciona o HTML também.

– DaviAragao
6 horas atrás

comentar |

Está bem difícil de entender. Você consegue editar a pergunta e colocar o seu CSS como código? Adiciona o HTML também.

– DaviAragao
6 horas atrás

Está bem difícil de entender. Você consegue editar a pergunta e colocar o seu CSS como código? Adiciona o HTML também.

– DaviAragao
6 horas atrás

comentar |

3 Respostas
3

ativas

mais antigas

votos

Só com CSS você poderia usar um label com checkbox (oculto) apenas no botão que abre o submenu, em vez de usar um link <a>. Ao usar um link <a> com href="#" apenas para abrir o submenu, irá alterar a URL adicionando o #.

Ao clicar no label irá marcar/desmarcar o checkbox, e você pode usar a pseudo-classe :checked no checkbox para mostrar/ocultar o submenu. Coloque o input após o label e adicione um id no checkbox e um for na label apontando para a id:

*{ margin: 0; padding: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666; outline: none;}

#nav li a, #nav li label {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; cursor: pointer;}

#nav li a:hover, #nav li label:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul, #nav li input{display: none;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

#nav li input:checked + ul{

   display: block; cursor:pointer;

}

<ul id="nav"> 

   <li>

      <label for="sub1">Consultores</label>

      <input id="sub1" type="checkbox">

      <ul>

         <li><a href="#">sub - 1</a></li>

         <li><a href="#">sub - 2</a></li>

         <li><a href="#">sub - 3</a></li>

      </ul>

   </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>



</ul>

Tem um erro de digitação na primeira linha do seu CSS: paddin seria
padding.

respondida 5 horas atrás

Sam

53,9mil113771

comentar |

Boa tarde, pelo que entendi você não está usando nenhum framework, neste caso de uma olhada nesse código, ele mostra como fazer, basta adaptar no seu código.

$(document).ready(function(){



  $('div.dropdown').each(function() {

    var $dropdown = $(this);



    $("a.dropdown-link", $dropdown).click(function(e) {

      e.preventDefault();

      $div = $("div.dropdown-container", $dropdown);

      $div.toggle();

      $("div.dropdown-container").not($div).hide();

      return false;

    });



});

    

  $('html').click(function(){

    $("div.dropdown-container").hide();

  });

     

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div id="dropdown-1" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-2" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-3" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>

Para funcionar será necessário importar jquery na sua aplicação.

só não edito seu código inteiro pq estou sem tempo, mas isso resolve.

editada 5 horas atrás

respondida 5 horas atrás

Renan

44615

Olá Renan, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

1

Editei, vê se assim fico melhor.

– Renan
5 horas atrás

comentar |

-3

São várias as maneiras de fazer um dropdown com click, o Bootstrap um framework bastante conhecido faz isso de maneira simples. Veja em https://getbootstrap.com/docs/4.0/components/dropdowns/

A opção hover: a é responsavel pela exibição ao passar o mouse sobre os links

Veja essa opção com Jquery no
Codepen

respondida 5 horas atrás

cairoofelipe

2717

Olá @cairoofelipe, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

Mas vc quer importar o Bootstrap inteiro só pra usar essa função de collapse? Oh loko são quase 300kb mais o jQuery só pra um paradinha dessas....

– hugocsl
5 horas atrás

comentar |

Sua resposta

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "526"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Desenvolvido por u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

Victor R é um usuário novo. Seja legal e dê uma olhada no nosso código de conduta

rascunho salvo

rascunho descartado

Registre-se ou faça log-in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Publicar como convidado

Nome

E-mail

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fpt.stackoverflow.com%2fquestions%2f367600%2fdropdown-com-clique%23new-answer', 'question_page');
}
);

Publicar como convidado

Nome

E-mail

Required, but never shown

3 Respostas
3

ativas

mais antigas

votos

3 Respostas
3

ativas

mais antigas

votos

*{ margin: 0; padding: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666; outline: none;}

#nav li a, #nav li label {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; cursor: pointer;}

#nav li a:hover, #nav li label:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul, #nav li input{display: none;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

#nav li input:checked + ul{

   display: block; cursor:pointer;

}

<ul id="nav"> 

   <li>

      <label for="sub1">Consultores</label>

      <input id="sub1" type="checkbox">

      <ul>

         <li><a href="#">sub - 1</a></li>

         <li><a href="#">sub - 2</a></li>

         <li><a href="#">sub - 3</a></li>

      </ul>

   </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>



</ul>

Tem um erro de digitação na primeira linha do seu CSS: paddin seria
padding.

respondida 5 horas atrás

Sam

53,9mil113771

comentar |

*{ margin: 0; padding: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666; outline: none;}

#nav li a, #nav li label {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; cursor: pointer;}

#nav li a:hover, #nav li label:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul, #nav li input{display: none;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

#nav li input:checked + ul{

   display: block; cursor:pointer;

}

<ul id="nav"> 

   <li>

      <label for="sub1">Consultores</label>

      <input id="sub1" type="checkbox">

      <ul>

         <li><a href="#">sub - 1</a></li>

         <li><a href="#">sub - 2</a></li>

         <li><a href="#">sub - 3</a></li>

      </ul>

   </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>



</ul>

Tem um erro de digitação na primeira linha do seu CSS: paddin seria
padding.

respondida 5 horas atrás

Sam

53,9mil113771

comentar |

*{ margin: 0; padding: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666; outline: none;}

#nav li a, #nav li label {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; cursor: pointer;}

#nav li a:hover, #nav li label:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul, #nav li input{display: none;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

#nav li input:checked + ul{

   display: block; cursor:pointer;

}

<ul id="nav"> 

   <li>

      <label for="sub1">Consultores</label>

      <input id="sub1" type="checkbox">

      <ul>

         <li><a href="#">sub - 1</a></li>

         <li><a href="#">sub - 2</a></li>

         <li><a href="#">sub - 3</a></li>

      </ul>

   </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>



</ul>

Tem um erro de digitação na primeira linha do seu CSS: paddin seria
padding.

respondida 5 horas atrás

Sam

53,9mil113771

*{ margin: 0; padding: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666; outline: none;}

#nav li a, #nav li label {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; cursor: pointer;}

#nav li a:hover, #nav li label:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul, #nav li input{display: none;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

#nav li input:checked + ul{

   display: block; cursor:pointer;

}

<ul id="nav"> 

   <li>

      <label for="sub1">Consultores</label>

      <input id="sub1" type="checkbox">

      <ul>

         <li><a href="#">sub - 1</a></li>

         <li><a href="#">sub - 2</a></li>

         <li><a href="#">sub - 3</a></li>

      </ul>

   </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>



</ul>

Tem um erro de digitação na primeira linha do seu CSS: paddin seria
padding.

*{ margin: 0; padding: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666; outline: none;}

#nav li a, #nav li label {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; cursor: pointer;}

#nav li a:hover, #nav li label:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul, #nav li input{display: none;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

#nav li input:checked + ul{

   display: block; cursor:pointer;

}

<ul id="nav"> 

   <li>

      <label for="sub1">Consultores</label>

      <input id="sub1" type="checkbox">

      <ul>

         <li><a href="#">sub - 1</a></li>

         <li><a href="#">sub - 2</a></li>

         <li><a href="#">sub - 3</a></li>

      </ul>

   </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>



</ul>

*{ margin: 0; padding: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666; outline: none;}

#nav li a, #nav li label {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; cursor: pointer;}

#nav li a:hover, #nav li label:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul, #nav li input{display: none;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

#nav li input:checked + ul{

   display: block; cursor:pointer;

}

<ul id="nav"> 

   <li>

      <label for="sub1">Consultores</label>

      <input id="sub1" type="checkbox">

      <ul>

         <li><a href="#">sub - 1</a></li>

         <li><a href="#">sub - 2</a></li>

         <li><a href="#">sub - 3</a></li>

      </ul>

   </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>



</ul>

respondida 5 horas atrás

Sam

53,9mil113771

respondida 5 horas atrás

Sam

53,9mil113771

respondida 5 horas atrás

Sam

53,9mil113771

respondida 5 horas atrás

Sam

53,9mil113771

comentar |

Boa tarde, pelo que entendi você não está usando nenhum framework, neste caso de uma olhada nesse código, ele mostra como fazer, basta adaptar no seu código.

$(document).ready(function(){



  $('div.dropdown').each(function() {

    var $dropdown = $(this);



    $("a.dropdown-link", $dropdown).click(function(e) {

      e.preventDefault();

      $div = $("div.dropdown-container", $dropdown);

      $div.toggle();

      $("div.dropdown-container").not($div).hide();

      return false;

    });



});

    

  $('html').click(function(){

    $("div.dropdown-container").hide();

  });

     

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div id="dropdown-1" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-2" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-3" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>

Para funcionar será necessário importar jquery na sua aplicação.

só não edito seu código inteiro pq estou sem tempo, mas isso resolve.

editada 5 horas atrás

respondida 5 horas atrás

Renan

44615

Olá Renan, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

1

Editei, vê se assim fico melhor.

– Renan
5 horas atrás

comentar |

Boa tarde, pelo que entendi você não está usando nenhum framework, neste caso de uma olhada nesse código, ele mostra como fazer, basta adaptar no seu código.

$(document).ready(function(){



  $('div.dropdown').each(function() {

    var $dropdown = $(this);



    $("a.dropdown-link", $dropdown).click(function(e) {

      e.preventDefault();

      $div = $("div.dropdown-container", $dropdown);

      $div.toggle();

      $("div.dropdown-container").not($div).hide();

      return false;

    });



});

    

  $('html').click(function(){

    $("div.dropdown-container").hide();

  });

     

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div id="dropdown-1" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-2" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-3" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>

Para funcionar será necessário importar jquery na sua aplicação.

só não edito seu código inteiro pq estou sem tempo, mas isso resolve.

editada 5 horas atrás

respondida 5 horas atrás

Renan

44615

Olá Renan, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

1

Editei, vê se assim fico melhor.

– Renan
5 horas atrás

comentar |

Boa tarde, pelo que entendi você não está usando nenhum framework, neste caso de uma olhada nesse código, ele mostra como fazer, basta adaptar no seu código.

$(document).ready(function(){



  $('div.dropdown').each(function() {

    var $dropdown = $(this);



    $("a.dropdown-link", $dropdown).click(function(e) {

      e.preventDefault();

      $div = $("div.dropdown-container", $dropdown);

      $div.toggle();

      $("div.dropdown-container").not($div).hide();

      return false;

    });



});

    

  $('html').click(function(){

    $("div.dropdown-container").hide();

  });

     

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div id="dropdown-1" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-2" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-3" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>

Para funcionar será necessário importar jquery na sua aplicação.

só não edito seu código inteiro pq estou sem tempo, mas isso resolve.

editada 5 horas atrás

respondida 5 horas atrás

Renan

44615

Boa tarde, pelo que entendi você não está usando nenhum framework, neste caso de uma olhada nesse código, ele mostra como fazer, basta adaptar no seu código.

$(document).ready(function(){



  $('div.dropdown').each(function() {

    var $dropdown = $(this);



    $("a.dropdown-link", $dropdown).click(function(e) {

      e.preventDefault();

      $div = $("div.dropdown-container", $dropdown);

      $div.toggle();

      $("div.dropdown-container").not($div).hide();

      return false;

    });



});

    

  $('html').click(function(){

    $("div.dropdown-container").hide();

  });

     

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div id="dropdown-1" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-2" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-3" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>

Para funcionar será necessário importar jquery na sua aplicação.

só não edito seu código inteiro pq estou sem tempo, mas isso resolve.

$(document).ready(function(){



  $('div.dropdown').each(function() {

    var $dropdown = $(this);



    $("a.dropdown-link", $dropdown).click(function(e) {

      e.preventDefault();

      $div = $("div.dropdown-container", $dropdown);

      $div.toggle();

      $("div.dropdown-container").not($div).hide();

      return false;

    });



});

    

  $('html').click(function(){

    $("div.dropdown-container").hide();

  });

     

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div id="dropdown-1" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-2" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-3" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>

$(document).ready(function(){



  $('div.dropdown').each(function() {

    var $dropdown = $(this);



    $("a.dropdown-link", $dropdown).click(function(e) {

      e.preventDefault();

      $div = $("div.dropdown-container", $dropdown);

      $div.toggle();

      $("div.dropdown-container").not($div).hide();

      return false;

    });



});

    

  $('html').click(function(){

    $("div.dropdown-container").hide();

  });

     

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div id="dropdown-1" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-2" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-3" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>

editada 5 horas atrás

respondida 5 horas atrás

Renan

44615

editada 5 horas atrás

respondida 5 horas atrás

Renan

44615

respondida 5 horas atrás

Renan

44615

respondida 5 horas atrás

Renan

44615

Olá Renan, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

1

Editei, vê se assim fico melhor.

– Renan
5 horas atrás

comentar |

Olá Renan, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

1

Editei, vê se assim fico melhor.

– Renan
5 horas atrás

Olá Renan, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

Editei, vê se assim fico melhor.

– Renan
5 horas atrás

comentar |

-3

São várias as maneiras de fazer um dropdown com click, o Bootstrap um framework bastante conhecido faz isso de maneira simples. Veja em https://getbootstrap.com/docs/4.0/components/dropdowns/

A opção hover: a é responsavel pela exibição ao passar o mouse sobre os links

Veja essa opção com Jquery no
Codepen

respondida 5 horas atrás

cairoofelipe

2717

Olá @cairoofelipe, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

Mas vc quer importar o Bootstrap inteiro só pra usar essa função de collapse? Oh loko são quase 300kb mais o jQuery só pra um paradinha dessas....

– hugocsl
5 horas atrás

comentar |

-3

São várias as maneiras de fazer um dropdown com click, o Bootstrap um framework bastante conhecido faz isso de maneira simples. Veja em https://getbootstrap.com/docs/4.0/components/dropdowns/

A opção hover: a é responsavel pela exibição ao passar o mouse sobre os links

Veja essa opção com Jquery no
Codepen

respondida 5 horas atrás

cairoofelipe

2717

Olá @cairoofelipe, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

Mas vc quer importar o Bootstrap inteiro só pra usar essa função de collapse? Oh loko são quase 300kb mais o jQuery só pra um paradinha dessas....

– hugocsl
5 horas atrás

comentar |

-3

São várias as maneiras de fazer um dropdown com click, o Bootstrap um framework bastante conhecido faz isso de maneira simples. Veja em https://getbootstrap.com/docs/4.0/components/dropdowns/

A opção hover: a é responsavel pela exibição ao passar o mouse sobre os links

Veja essa opção com Jquery no
Codepen

respondida 5 horas atrás

cairoofelipe

2717

São várias as maneiras de fazer um dropdown com click, o Bootstrap um framework bastante conhecido faz isso de maneira simples. Veja em https://getbootstrap.com/docs/4.0/components/dropdowns/

A opção hover: a é responsavel pela exibição ao passar o mouse sobre os links

Veja essa opção com Jquery no
Codepen

respondida 5 horas atrás

cairoofelipe

2717

respondida 5 horas atrás

cairoofelipe

2717

respondida 5 horas atrás

cairoofelipe

2717

respondida 5 horas atrás

cairoofelipe

2717

Olá @cairoofelipe, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

Mas vc quer importar o Bootstrap inteiro só pra usar essa função de collapse? Oh loko são quase 300kb mais o jQuery só pra um paradinha dessas....

– hugocsl
5 horas atrás

comentar |

Olá @cairoofelipe, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

Mas vc quer importar o Bootstrap inteiro só pra usar essa função de collapse? Oh loko são quase 300kb mais o jQuery só pra um paradinha dessas....

– hugocsl
5 horas atrás

Olá @cairoofelipe, poderia postar uma parte do código aqui ou explicar melhor a resposta? É possível por um código executável na resposta no botão Trecho HTML/CSS/JavaScript ou com o atalho do teclado Ctrl + M.

– Laércio Lopes
5 horas atrás

Mas vc quer importar o Bootstrap inteiro só pra usar essa função de collapse? Oh loko são quase 300kb mais o jQuery só pra um paradinha dessas....

– hugocsl
5 horas atrás

comentar |

Victor R é um usuário novo. Seja legal e dê uma olhada no nosso código de conduta

rascunho salvo

rascunho descartado

Victor R é um usuário novo. Seja legal e dê uma olhada no nosso código de conduta

Obrigado por contribuir com o Stack Overflow em Português!

Certifique-se de responder à pergunta. Entre em detalhes sobre a sua solução e compartilhe o que você descobriu.

Mas evite …

Pedir esclarecimentos ou detalhes sobre outras respostas.

Fazer afirmações baseadas apenas na sua opinião; aponte referências ou experiências anteriores.

Para aprender mais, veja nossas dicas sobre como escrever boas respostas.

rascunho salvo

rascunho descartado

Registre-se ou faça log-in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Publicar como convidado

Nome

E-mail

Required, but never shown

Publicar como convidado

Nome

E-mail

Required, but never shown

Registre-se ou faça log-in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Publicar como convidado

Nome

E-mail

Required, but never shown

Registre-se ou faça log-in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Publicar como convidado

Nome

E-mail

Required, but never shown

Registre-se ou faça log-in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Publicar como convidado

Nome

E-mail

Required, but never shown

Nome

E-mail

Required, but never shown

E-mail

Required, but never shown

E-mail

Required, but never shown

E-mail

Required, but never shown

Nome

E-mail

Required, but never shown

E-mail

Required, but never shown

E-mail

Required, but never shown

E-mail

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Kdtyjb