-1

Olá.

Como fazer para fazer um link e quando este ser clicado, mostrar mais links abaixo?

Por exemplo: um link de estatísticas de questões resolvidas num site e que ao clicar neste link, exiba os links: disciplina, assunto, banca. Ou seja, escolher o tipo de estatística.

Obs, pesquisando na internet, vi drop down, mas os links ficam em listas visíveis e não é essa a ideia. Quero listas que só sejam mostradas ao clicar no link.

2
  • Está pendente, porém mais claro que isso, só quem não sabe interpetar português. Ou as perguntas só fazem sentido quando já começam com código? 2/09/2016 às 14:55
  • Talvez ilustrando ajude. ponha 2 imagens, uma como é antes de clicar, e outra depois de clicar. Não participei do fechamento, mas eu consigo imaginar mais de uma coisa se olhar só o seu texto. Um bom exercício para aproveitar bem o site (e talvez outras coisas além do site), é pressupor que as outras pessoas podem ter razão em questionar (ou fechar a pergunta, como no seu caso), mesmo que para você pareça tudo muito óbvio.
    – Largato
    2/09/2016 às 16:10

2 Respostas 2

2

Use a tag details do HTML5, veja um exemplo de uso http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details

Exemplo obtido do site do W3Schools:

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

3
  • 1
    Vale mencionar que ainda não foi adotado por todos os principais browsers.
    – Largato
    1/09/2016 às 20:29
  • @otavio-fagundes Agradeço pela resposta. Funcionou. Não ilustrei com código ou imagem porque fui bastante claro. Seria redundante tentar clariar mais que isso. Fico irritado com essas prepotências desnecessária. 2/09/2016 às 18:18
  • @AndréNascimento eu não sei porque a galera não entendeu sua pergunta, ao meu ver, mesmo sem codigo esta bem explícito oque você queria, abraços. 6/09/2016 às 19:00
1

Pode fazer usando a propriedade :active do css.

Exemplo

ul{
  list-style:none;
}

ul a{
  text-decoration:none;
}

li{
  cursor:pointer;
  float:left;
  position:relative;
  width:150px;
  height:20px;
  border:solid 1px #CCC;
}

ul ul{
  display:none;
  position:absolute;
  top:100%;
}

ul li:active ul{
  display:block;
}
<ul>
  <li>
      <a href="javascript:void(0)">MENU</a>
      <ul>
        <li>
            <a href="javascript:void(0)">SUB MENU</a>
        </li>
      </ul>
  </li>
</ul>

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